输入文本格式、Jquery、Javascript或Css

输入时，第一个字母应改为大写，但其余字母应为小写，即使用户输入大写字母，也应改为小写

输入字示例：鼠标、计算机

重要提示：键入时应改为：鼠标、计算机

我已经尝试了很多Stackflow soloution，但对于上面的逻辑，我没有发现

使用Css:

使用JavaScript:（这一个有效，但最后一个字母无效）

使用Jquery、Javascript或Css可以接受任何解决方案

$(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);
    });
});

试试这个css解决方案

---

使用

输入

事件代替

按键

事件

 $('input').on('input', function(event) {

调用onkeypress和onblur方法试试这个

$('input').on('keyup', function(event) {
    var firstchar = $(this).val().substring(0,1);
    var remainchar = $(this).val().substring(1,$(this).val().length).toLowerCase();
    $(this).val(firstchar + remainchar);
});
$('input').on('keydown', function(event) {
    var firstchar = $(this).val().substring(0,1);
    var remainchar = $(this).val().substring(1,$(this).val().length).toLowerCase();
    $(this).val(firstchar + remainchar);
});

---

指出CSS

文本转换：大写

仅更改输入的显示，而Javascript修改实际的HTML值。例如，如果输入是需要验证的验证码响应或表单输入字段，则这很重要

使用纯Javascript，您可以将输入拆分为单独的单词，并对每个单词进行转换，如下所示：

HTML

鼠标、电脑 资本化 JS

var rgx=/，/；/*分词器，可以是任何东西*/
var target=document.getElementById（'transform'）；
document.getElementsByTagName（'button'）[0].onclick=function（）{
var strArr=target.innerHTML.split（rgx）；/*分割输入*/
对于（var word=0；word

演示：

---

注意：如果您的输入是

或

，请将

.innerHTML

替换为

.value

，但在输入值中间键入用户输入的大写字母时，其余字母应为小写。是的。。你看过演示吗？？只有在键入

Bbbbbbb

时，结果才会是这样的“Bbbbbbb”，如果您键入

bbbBBB

它将显示为

bbbBBB

我认为

keyup

事件更好

keyup

如果用户粘贴到字段中不会触发不，您错了，keyup更好，是的，它将在粘贴时触发。如果使用鼠标粘贴，keyup将不会触发。如果你用键盘快捷键粘贴可能会有问题。你的JS小提琴（最后一把）对我有用吗？你的问题是什么？它可以工作，但是chrome浏览器版本34中有一个bug，你不能将左箭头键向后移动。无论如何，这个解决方案也很有帮助。谢谢。

function initCap(t){    
t.value=t.value.toLowerCase();  
t.style='text-transform:capitalize;'
}

$('input').on('keyup', function(event) {
    var firstchar = $(this).val().substring(0,1);
    var remainchar = $(this).val().substring(1,$(this).val().length).toLowerCase();
    $(this).val(firstchar + remainchar);
});
$('input').on('keydown', function(event) {
    var firstchar = $(this).val().substring(0,1);
    var remainchar = $(this).val().substring(1,$(this).val().length).toLowerCase();
    $(this).val(firstchar + remainchar);
});

<div id="transform">mOuSE, cOmPUTEr</div>
<button type="button">Capitalize</button>

var rgx = /,/; /* word splitter, can be anything */
var target = document.getElementById('transform');
document.getElementsByTagName('button')[0].onclick = function() {
  var strArr = target.innerHTML.split(rgx); /* split the input */
  for (var word = 0; word < strArr.length; word++) { /* iterate over each word */
     strArr[word] = strArr[word].toLowerCase().trim(); 
     var firstLetter = strArr[word].substr(0,1).toUpperCase();
     var otherLetters = strArr[word].substr(1, strArr[word].length)
     strArr[word] = firstLetter+otherLetters;
  }
  target.innerHTML = strArr.join();
}