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. У меня такая же проблема. Однако у меня есть разработка с использованием WebForms в ASP.Net.

    Чтобы усложнить ситуацию, я использую элементы управления DevExpress. А так как их "входы" (или TextBox'ы) сделаны на основе таблиц, то пришлось сделать так:

    1. Сначала в элементе управления ASPxTextBox я искал событие KeyUp на стороне клиента, как предложил Иван Ботеро. Его можно найти, выбрав элемент управления в режиме конструктора в свойствах окна как 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