Home / Questions / 59991
Accepted
Dev 200
Asked: 2020-04-04 05:07:16 +0800 CST 2020-04-04 05:07:16 +0800 CST

将在任何输入上按下的键转换为大写

  • 772

我希望在键入键时将它们转换为大写，考虑到它可以通过任何形式的输入来完成，也就是说，公式是通用的。

我有以下内容：

function mayus(e) {

    var tecla=e.value;
    var tecla2=tecla.toUpperCase();
    
    alert(tecla2);
}
<input type="text" onkeypress="mayus(this);">

javascript

5 Answers

  1. Best Answer

    onKeyPress我建议您不要使用 ，而是使用onKeyUp，它会在您停止按键时起作用。

    所以我们唯一要做的就是，使用这个函数，我们toUpperCase()将转换整个字符串，它会产生一个一个一个完成的效果，因为onKeyUp()函数的每个事件都会被执行。

    也就是说，不必逐个字母转换为大写字母。

    不过，您可以在其他人中复制该功能，<input type='text'>并且它的工作原理相同，因此将其通用化是没有问题的。

    function mayus(e) {
    e.value = e.value.toUpperCase();
}
    <input type="text" onkeyup="mayus(this);">
<input type="text" onkeyup="mayus(this);">

    解决它的另一种方法是这样的：

    创建 时<input type='text'>，您id为每个分配一个，稍后您可以应用此公式。

    <input type="text" id="campo" onKeyUp="document.getElementById(this.id).value=document.getElementById(this.id).value.toUpperCase()">

    • 14

  2. 无需调用 javascript 的最简单方法只需在您的 css 中包含这一行：

    input{
    text-transform: uppercase;
}

    并准备好。

    • 4

  3. 使用jQuery<input> ，您可以将任何或的文本更改为大写，通过将其插入文档的头部 () 中<textarea>尝试以下代码：<head>

        <script>
     $(document).ready( function () {
      $("input").on("keypress", function () {
       $input=$(this);
       setTimeout(function () {
        $input.val($input.val().toUpperCase());
       },50);
      })
     })
    </script>

    您还可以使用CSS来表示<input>或者<textarea>您想要转换为大写：

    $(document).ready( function () {
 $(".UpperCase").on("keypress", function () {
  $input=$(this);
  setTimeout(function () {
   $input.val($input.val().toUpperCase());
  },50);
 })
})
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
 <h1>Datos de Contacto</h1>
 <pre>
  codigo    <input name="codigo">
  nombre    <input name="nombre" class="UpperCase">
  dirección <input name="direccion">
  teléfono  <input name="telefono">
  cargo     <input name="cargo" class="UpperCase">
 </pre>
<form>

    • 3

  4. 我有同样的问题。但是，我在 ASP.Net 中使用 WebForms 进行了开发。

    为了使事情复杂化，我正在使用 DevExpress 控件。而且由于他们的“输入”（或文本框）是基于表格制作的，我不得不这样做：

    1. 首先，按照 Iván Botero 的建议，我在 ASPxTextBox 控件中查找 KeyUp 客户端事件。可以通过在 Window 属性中的设计视图中将控件选择为 ClientSideEvents 来找到它。节点显示出来，我们选择 KeyUp 事件
    2. 当窗口打开时，函数的编写方式与我们的同事向我们提出的方式类似。在这种情况下，我有如下：

    function convierteTextoAMayusculas(s, e) {
    s.inputElement.value = s.inputElement.value.toUpperCase();
}

    我决定这样做是因为我在一个单独的 javascript 文档中拥有该功能，因为我计划在文档的其他区域和其他文档中重用它。事实上，我建议遵循 DevExpress 控件本身建议的模式，以便一切都更清晰，如下所示：

    <dx:ASPxTextBox ID="xtxtMiTextBox" runat="server" Width="170px">
    <ClientSideEvents KeyUp="function(s, e) { convierteTextoAMayusculas(s, e); }" />
</dx:ASPxTextBox>

    通过这种方式，我们可以注意到我们获得了对控件的引用，该控件在其源参数中调用事件以使用它。

    非常感谢您之前的回复，他们非常有帮助。

    祝福大家。

    • 1

  5. 我使用它（阅读事件keyup），它对我有用，没有问题：

    $('#ordenName').keyup(function() {
  var datos = new String($('#ordenName').val());
  datos = datos.toUpperCase(datos);
  $('#lblOrden').html(datos);
  $('#ordenName').val(datos);
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Usted esta escribiendo esto: <span id="lblOrden"></span></p>

<input type="text" class="form-control" name="norden" id="ordenName">

    • 1