在 textarea 中添加/删除关键字在手机上不起作用（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

与其使用侦听keypress JavaScript event (now deprecated) 的.keypress()，不如使用input 事件。这既是当前支持的，也不依赖于特定的输入法（例如，如果用户粘贴数据而不是键入数据，它也可以工作）。这意味着它更有可能在不同类型的设备上保持一致的行为。

每次用户在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>