Javascript自动大写输入字段中每个单词的第一个字母

时间:2018-01-06 09:44:10

标签: javascript html

我有一个javascript代码,可以在页面的任何输入字段中输入每个句子的第一个字母自动大写。

代码如下:

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function() {
    $('input').on('keydown', function(event) {
        if (this.selectionStart == 0 && event.keyCode >= 65 && event.keyCode <= 90 && !(event.shiftKey) && !(event.ctrlKey) && !(event.metaKey) && !(event.altKey)) {
           var $t = $(this);
           event.preventDefault();
           var char = String.fromCharCode(event.keyCode);
           $t.val(char + $t.val().slice(this.selectionEnd));
           this.setSelectionRange(1,1);
        }
    });
});
});//]]> 

</script>

我需要帮助将上面的代码转换为自动调整输入字段中输入的每个单词的首字母,而不仅仅是第一个单词。

2 个答案:

答案 0 :(得分:4)

您只需在keyup事件

上应用此方法即可
function toTitleCase( str ) 
{
   return str.split(/\s+/).map( s => s.charAt( 0 ).toUpperCase() + s.substring(1).toLowerCase() ).join( " " );
}

现在用它作为

$('input').on('keyup', function(event) {
    var $t = $(this);
    $t.val( toTitleCase( $t.val() ) );
});

<强>演示

&#13;
&#13;
function toTitleCase(str) {
  return str.split(/\s+/).map(s => s.charAt(0).toUpperCase() + s.substring(1).toLowerCase()).join(" ");
}


$('input').on('keyup', function(event) {
  var $t = $(this);
  $t.val(toTitleCase($t.val()));
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

不要让它变硬。如果你能做到这一点。

将此CSS应用于该字段。

.capitalize {
    text-transform: capitalize;   
  }

for jquery:

$('#id').addClass('capitalize');

for javascript:

document.getElementById("id").className="capitalize";