如何将输出 keyPress 设置为相同的输入字段？答案

【问题标题】：How can i set the output keyPress to the same input field?如何将输出 keyPress 设置为相同的输入字段？
【发布时间】：2020-04-21 13:34:28
【问题描述】：

我正在尝试获取用户按键输出并将其设置为相同的输入。

但是在我的input 结果中，我得到了两次输出。例如，如果用户按下d，我看到Dd。我该如何解决这个问题？

$(document).ready(function() {
  $("#test").keypress(function(e) {
    let key = String.fromCharCode(e.keyCode);
    let upperCaseKey = (key.toUpperCase())
    $("#test").val(upperCaseKey);
    $("#test").css("width", "25px")
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type=text class="myid" id="test" />

【问题讨论】：

你需要阻止默认/系统按键事件：e.preventDefault();

标签： jquery keypress

【解决方案1】：

<input type=text class="myid" id="test" />




$(".myid").on('keypress', function(evt) {
  $(this).val(function (_, val) {
    return val + String.fromCharCode(evt.which).toUpperCase();
  });

  return false;
});

【讨论】：

仅代码答案几乎总是可以通过添加对它们的工作方式和原因的解释来改进。
会处理这个

【解决方案2】：

假设您的目标是强制用户输入的值为大写，您只需在 value 上调用 toUpperCase()：

jQuery($ => {
  $("#test").on('input', e => e.target.value = e.target.value.toUpperCase());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type=text class="myid" id="test" />

注意这里使用了input 事件。这是因为它还将覆盖使用鼠标复制到字段中的文本。

【讨论】：