javascript - 根据输入框中的焦点启用/禁用按键事件

标签 javascript jquery

  • 如果输入框未获得焦点,则应触发按键事件
  • 如果输入框获得焦点,则应禁用按键事件,并且 应允许输入文本。
  • 我尝试过聚焦和模糊,但没有效果。

HTML

<div class="button">
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>

</div>

<div class="form">
<form action="" id="submit">
  <input type="text" id="num" number/>
</form>
</div>

<div id="show"></div>

JQUERY

$(function($){
        //on click
    $('.btn').click(function(){
                var me = $(this);
        $('#show').html(me.text());
    });
    //on keypress
    $(window).keypress(function(k){         
            switch (k.keyCode) {                
                // user presses the "1"
            case 49:
             $('#show').html(1);
               break;           
                // user presses the "2"
            case 50:
            $('#show').html(2);
               break;

                // user presses the "3"
            case 51:
            $('#show').html(3);
               break;
          }
    });

    //on submit
    $('#submit').submit(function(e){
        e.preventDefault();
      var data = $('#num').val();
      $('#show').html(data);
      $('#num').val('');
    })
});

JSFiddle

最佳答案

尝试在按键事件中检查输入框的焦点属性,例如:

if (!$('#num').is(':focus')) {
  switch (k.keyCode) {
    case 49:
      $('#show').html(1);
      break;
      // user presses the "2"
    case 50:
      $('#show').html(2);
      break;
      // user presses the "3"
    case 51:
      $('#show').html(3);
      break;
    default:
  }
}

您可以在 fiddle 中查看。我已经更新了。

关于javascript - 根据输入框中的焦点启用/禁用按键事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45164715/

相关文章:

javascript - jQuery - 如果选择选项值等于数据添加类

javascript - 如何在 Angular 中运行多个 AND 条件?

javascript - 在 javascript 中获取数据时 Highcharts 显示加载图标

javascript - 全日历时段持续时间

jquery - 在固定 div 内加载表单

javascript - RequireJS 乱序执行 - 不接受 `require` 的参数

javascript - 当我尝试从 vuex 商店调度操作时,Nuxt 抛出错误 'unknown action type'

javascript - 谷歌折线图显示 Uncaught TypeError : Cannot call method 'getSelection' of null

jquery - 一个简单的 jQuery 表单验证脚本

javascript - 动态创建多个div并分配id