在输入框中将第一个字母转换为大写
JS Bin演示
此正则表达式将每个小写字词转换为大写字母。 我有一个全名输入字段。 我希望用户看到他/她按下的每个单词的第一个字母在输入字段中转换为大写。
我不知道如何正确替换当前输入字段中的选定字符。
$('input').on('keypress', function(event) { var $this = $(this), val = $this.val(), regex = /\b[az]/g; val = val.toLowerCase().replace(regex, function(letter) { return letter.toUpperCase(); }); // I want this value to be in the input field. console.log(val); }); val = val.substr(0, 1).toUpperCase() + val.substr(1);
要么：
val = val.charAt(0).toUpperCase() + val.substr(1);
您可以将第一个字母转换为大写字母，并通过检查插入符号位置和重置插入符号位置，仍然可以避免光标跳到行首的恼人问题。 我通过定义一些函数在一个表单上执行此操作，一个用于所有大写，一个用于正确大小写，一个用于仅初始大写…然后两个函数用于插入位置，一个获取，一个设置：
function ProperCase(el) { pos = getInputSelection(el); s = $(el).val(); s = s.toLowerCase().replace(/^(.)|\s(.)|'(.)/g, function($1) { return $1.toUpperCase(); }); $(el).val(s); setCaretPosition(el,pos.start); } function UpperCase(el) { pos = getInputSelection(el); s = $(el).val(); s = s.toUpperCase(); $(el).val(s); setCaretPosition(el,pos.start); } function initialCap(el) { pos = getInputSelection(el); s = $(el).val(); s = s.substr(0, 1).toUpperCase() + s.substr(1); $(el).val(s); setCaretPosition(el,pos.start); } /* GETS CARET POSITION */ function getInputSelection(el) { var start = 0, end = 0, normalizedValue, range, textInputRange, len, endRange; if (typeof el.selectionStart == 'number' && typeof el.selectionEnd == 'number') { start = el.selectionStart; end = el.selectionEnd; } else { range = document.selection.createRange(); if (range && range.parentElement() == el) { len = el.value.length; normalizedValue = el.value.replace(/\r\n/g, "\n"); // Create a working TextRange that lives only in the input textInputRange = el.createTextRange(); textInputRange.moveToBookmark(range.getBookmark()); // Check if the start and end of the selection are at the very end // of the input, since moveStart/moveEnd doesn't return what we want // in those cases endRange = el.createTextRange(); endRange.collapse(false); if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) { start = end = len; } else { start = -textInputRange.moveStart("character", -len); start += normalizedValue.slice(0, start).split("\n").length - 1; if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) { end = len; } else { end = -textInputRange.moveEnd("character", -len); end += normalizedValue.slice(0, end).split("\n").length - 1; } } } } return { start: start, end: end }; } /* SETS CARET POSITION */ function setCaretPosition(el, caretPos) { el.value = el.value; // ^ this is used to not only get "focus", but // to make sure we don't have it everything -selected- // (it causes an issue in chrome, and having it doesn't hurt any other browser) if (el !== null) { if (el.createTextRange) { var range = el.createTextRange(); range.move('character', caretPos); range.select(); return true; } else { // (el.selectionStart === 0 added for Firefox bug) if (el.selectionStart || el.selectionStart === 0) { el.focus(); el.setSelectionRange(caretPos, caretPos); return true; } else { // fail city, fortunately this never happens (as far as I've tested) :) el.focus(); return false; } } } }
然后在文档就绪时我将一个keyup事件监听器应用于我想要检查的字段，但我只监听可以实际修改字段内容的密钥（例如，我跳过“Shift”键…），如果用户点击“Esc”我恢复该字段的原始值…
$('.updatablefield', $('#myform')).keyup(function(e) { myfield=this.id; myfieldname=this.name; el = document.getElementById(myfield); // or the jquery way: // el = $(this)[0]; if (e.keyCode == 27) { // if esc character is pressed $('#'+myfield).val(original_field_values[myfield]); // I stored the original value of the fields in an array... // if you only need to do the initial letter uppercase, you can apply it here directly like this: initialCap(el); } // end if (e.keyCode == 27) // if any other character is pressed that will modify the field (letters, numbers, symbols, space, backspace, del...) else if (e.keyCode == 8||e.keycode == 32||e.keyCode > 45 && e.keyCode < 91||e.keyCode > 95 && e.keyCode < 112||e.keyCode > 185 && e.keyCode < 223||e.keyCode == 226) { // if you only need to do the initial letter uppercase, you can apply it here directly like this: initialCap(el); } // end else = if any other character is pressed // }); // end $(document).keyup(function(e)
你可以在这里看到这个例子的工作小提琴： http ： //jsfiddle.net/ZSDXA/
简单的说：
$this.val(val);
$(document).ready(function() { $('input').on('keypress', function(event) { var $this = $(this), val = $this.val(); val = val.toLowerCase().replace(/\b[az]/g, function(letter) { return letter.toUpperCase(); }); console.log(val); $this.val(val); }); });
正如@roXon所示，这可以简化：
$(document).ready(function() { //alert('ready'); $('input').on('keypress', function(event) { var $this = $(this), val = $this.val(); val = val.substr(0, 1).toUpperCase() + val.substr(1).toLowerCase(); $this.val(val); }); });
在我看来，另一种更好的解决方案是将元素设置为大写 ，然后执行逻辑服务器端。
这消除了任何javascript的开销，并确保逻辑在服务器端处理（无论如何它应该是！）
$('input').on('keyup', function(event) { $(this).val(function(i, v){ return v.replace(/[a-zA-Z]/, function(c){ return c.toUpperCase(); }) }) });
这将适用于keyup上的每个文本字段调用函数
其中id是文本字段的id，value是您在textfield中键入的值
function capitalizeFirstLetter(value,id) { if(value.length>0){ var str= value.replace(value.substr(0,1),value.substr(0,1).toUpperCase()); document.getElementById(id).value=str; } }
只使用这个工作作为首都char的名字
style="text-transform:capitalize;
喜欢
$('.form-capitalize').keyup(function(event) { var $this = $(this), val = $this.val(), regex = /\b[az]/g; val = val.toLowerCase().replace(regex, function(letter) { return letter.toUpperCase(); }); this.value = val; // I want this value to be in the input field. console.log(val); });