在按键上自动将字母转换为小写字母？

Question

我想在按键上自动转换字母，试过这个

$(document).on('keypress', function(e) {
  $("#nick").val().toLowerCase();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id=nick value="">

但是当我写大写字母时，它不会转换为小写字母。我错在哪里？

Answer 1

您没有修改现有值。您需要重新分配小写值：

$(document).on('keypress', function(e) {
  var value = $("#nick").val().toLowerCase();

  $("#nick").val(value);
});

由于keypress事件不会更改最后一个字符，我建议您改为使用input event。 keyup事件也可以。

Example Here

$(document).on('input', function (e) {
  e.target.value = e.target.value.toLowerCase();
});

没有jQuery：

Example Here

document.addEventListener('input', function (e) {
  e.target.value = e.target.value.toLowerCase();
});

Answer 2

你必须在某处使用转换后的文本，对吗？ ：）

$(document).on('keypress', function(e) {
    $("#nick").val($("#nick").val().toLowerCase());
});

<强>更新

如果您使用keyup，它将按预期工作： DEMO

$(document).on('keyup', function(e) {
    $("#nick").val($("#nick").val().toLowerCase());
});

Answer 3

您也可以使用以下方法。

$(document).on('keyup','#nick',function(e){
    $(this).val(e.currentTarget.value.toLowerCase());
})

$(document).on('keyup','#nick',function(e){
    $(this).val(e.currentTarget.value.toLowerCase());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="nick" value="">