添加/删除文本区域中的关键字不适用于手机（jquery）

Question

在电脑上运行良好。在计算机上，输入单词并按空格键后，单词会被包裹在一个框中，您可以选择将其删除。在手机上，按空格键后什么也不会发生。它也不限制手机上的 5 个单词。

工作 jsfiddle：http://jsfiddle.net/1hco43vr/

 $('#box a').on('click', function() {

    $(this).parent().parent().remove();

    console.log('remove disabled');

    if ($('#box ul li').length <= 5) {

      $('#type').prop('disabled', false);

    }

  });

}

$('#type').keypress(function(e) {

  if (e.which == 32) { //change to 32 for spacebar instead of enter

    var tx = $(this).val();

    if ($('#box ul li').length > 5) {

      $(this).val('');

      console.log('add disabled');

      $('#type').prop('disabled', 'disabled');

    } else {

      if (tx) {

        $(this).val('').parent().before('<li><span>' + tx + '<a href="javascript:void(0);">x</a></span></li>');

        closer();

      }

    }

  }

});

Answer 1

最好使用input事件，而不是使用侦听JavaScript 事件（现已弃用）的.keypress()。目前支持此功能，并且不依赖于特定的输入方法（例如，如果用户粘贴数据而不是键入数据，它也可以工作）。这意味着它更有可能在不同类型的设备上表现一致。keypress每次用户在input字段中输入文本时，在执行有用的操作之前检查用户是否输入了空格：http://jsfiddle.net/7vdtz5jm/2/function closer() {  $('#box a').on('click', function() {    $(this).parent().parent().remove();    console.log('remove disabled');    if ($('#box ul li').length <= 5) {      $('#type').prop('disabled', false);    }  });}$('#type').on('input', function(e) {  var tx = $(this).val();  var array = tx.split(' ');  var limit = 5;  var remainder = '';    if (1 < array.length) { //change to 32 for spacebar instead of enter    if ($('#box ul li').length > limit) {      $(this).val('');      console.log('add disabled');      $('#type').prop('disabled', 'disabled');    } else {      $.each(array, function(i, text) {        if(i < limit && i === array.length - 1 && text) { //no space at the end           remainder = text;           return false;        } else if($('#box ul li').length <= limit) {          if (text) {            $('#type').parent().before('<li><span>' + text + '<a href="javascript:void(0);">x</a></span></li>');            closer();          };        } else {          $('#type').val('');          console.log('add disabled');          $('#type').prop('disabled', 'disabled');          remainder = '';          return false;        };      })            $('#type').val(remainder);    }  }});#box{padding:8px 2px;border:1px solid #CCCCCC;display:block}#box input,#box input:active,#box input:focus{border:none;background:none;outline:none}#box ul,#box li,#box input{margin:0;padding:0}#box ul,#box li{list-style:none}#box li,#box a{display:inline-block;margin:2px}#box span{background-color:#EDEDED;padding:3px;color:#666666;border:1px solid #CCCCCC}#box a{font-size:12px;line-height:12px;color:#666666;text-decoration:none;padding:1px 3px;margin-left:5px;font-weight:bold;background-color:#FFFFFF;vertical-align:top;border:1px solid #CCCCCC;margin-top:-1px}#box a:hover{background-color:#666666;color:#FFFFFF}/* why not? */body{font-family:sans-serif}#box span{border-radius:5px}#box a{border-radius:100%;overflow:hidden}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><div id="box">    <ul>        <li><input type="text" id="type"/></li>    </ul></div><small>*put something in the input above, and press enter.</small>