在 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()來偵聽keypress JavaScript 事件（現已棄用） ，不如使用輸入事件。 這既是當前支持的，也不依賴於特定的輸入法（例如，如果用戶粘貼數據而不是鍵入數據，它也可以工作）。 這意味着它有更好的機會在不同類型的設備上保持一致的行為。

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