none
Обработка нажатий клавиш клавиатуры (JS+Jquery) RRS feed

  • Вопрос

  • Помогите разобраться. В клиентской части на JS или JS+Jquery необходимо реализовать ввод с клавиатуры любого числа. Другими словами, при нажатии клавиш '1','2','3','4','5','6','7','8','9','0' должно выполняться alert('вывод на экран числа'). Сложность заключается в том, что нужно вводить не только одноразрядные числа, но и двухразрядные, итд... Причем, если промежуток между нажатиями на клавиши меньше n секунд, то алгоритм распознает это число с большей разрядностью (например, 123), и наоборот, если промежуток больше n секунд между нажатиями, то, соответсвенно, алгоритм выдает alert('1') потом alert('2') и alert('3'). Как можно это реализовать более рациональным способом?
    22 января 2013 г. 10:22

Ответы

  • Вот на чистом JS.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="Scripts/jquery-1.7.1.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
        <input type="text" value="" onkeypress="onkeypressHandler(event);" />
        </form>
      <script type="text/javascript">
        var interval = 1000; // секунда.
        var startTime = undefined;
        var numbersArray = new Array();
        var timer = undefined;
        function onkeypressHandler(event) {
          if (startTime == undefined) {
            startTime = Date.now();
            addNumberInArray(getChar(event));
          }
          else {
            if (Date.now() - startTime > interval) {
              showNumbers();
              startTime = undefined
            }
            else {
              addNumberInArray(getChar(event));
              startTime = Date.now();
            }
          }
        }
        function getChar(event) {
          if (event.which == null) {
            if (event.keyCode < 32) return null;
            return String.fromCharCode(event.keyCode)
          }
          if (event.which != 0 && event.charCode != 0) {
            if (event.which < 32) return null;
            return String.fromCharCode(event.which);
          }
          return null;
        }
        function addNumberInArray(number) {
          numbersArray.push(number);
        }
        function showNumbers() {
          var numbersString = "";
          for (i = 0; i < numbersArray.length; i++)
            numbersString += numbersArray[i];
          alert(numbersString);
          numbersArray = new Array();
        }
      </script>
    </body>
    </html>

    • Помечено в качестве ответа Higgs.Boson 22 января 2013 г. 12:46
    22 января 2013 г. 12:19
    Модератор

Все ответы

  • Вот на чистом JS.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="Scripts/jquery-1.7.1.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
        <input type="text" value="" onkeypress="onkeypressHandler(event);" />
        </form>
      <script type="text/javascript">
        var interval = 1000; // секунда.
        var startTime = undefined;
        var numbersArray = new Array();
        var timer = undefined;
        function onkeypressHandler(event) {
          if (startTime == undefined) {
            startTime = Date.now();
            addNumberInArray(getChar(event));
          }
          else {
            if (Date.now() - startTime > interval) {
              showNumbers();
              startTime = undefined
            }
            else {
              addNumberInArray(getChar(event));
              startTime = Date.now();
            }
          }
        }
        function getChar(event) {
          if (event.which == null) {
            if (event.keyCode < 32) return null;
            return String.fromCharCode(event.keyCode)
          }
          if (event.which != 0 && event.charCode != 0) {
            if (event.which < 32) return null;
            return String.fromCharCode(event.which);
          }
          return null;
        }
        function addNumberInArray(number) {
          numbersArray.push(number);
        }
        function showNumbers() {
          var numbersString = "";
          for (i = 0; i < numbersArray.length; i++)
            numbersString += numbersArray[i];
          alert(numbersString);
          numbersArray = new Array();
        }
      </script>
    </body>
    </html>

    • Помечено в качестве ответа Higgs.Boson 22 января 2013 г. 12:46
    22 января 2013 г. 12:19
    Модератор
  • Спасибо) Я на самом деле, думал насчет такого приема, но полагал, что есть более изящный путь решения проблемы)) Спасибо за код)
    22 января 2013 г. 12:46
  •  Единственное, что при нажатии после какого-то лимитного времени (1001/1000 сек.), у нас выплевывается массив в функцию alert(), но это нажатие на клавишу теряется и никуда не записывается. И еще, если мы ввели последовательность чисел (будь-то 1, 63, 45, 5, 6). Последний элемент числового ряда не выплевывается, поскольку там еще должен стоять таймер, который отслеживает время нахождения чисел в массиве.... Но, на самом деле, Ваш ответ полностью удовлетворяет, поскольку он демонстрирует общий подход для решения поставленной задачи.
    23 января 2013 г. 4:23