防止將錯誤的值粘貼到輸入數字類型中

Question

我有一個類型為“ number”的Input元素，應該只接受0,1，..，9和“。”。 默認情況下，您也可以使用+，-和其他字符，這些字符我可以通過EventListener“ keydown”和keyCodes來防止。 工作正常。

但是，如何防止用戶將其他內容粘貼或拖放到輸入中呢？ 我試圖驗證input.value，但是當它不是有效數字時，它實際上給了我“”。 在粘貼之前，是否有辦法查看用戶要粘貼的內容？

我也知道，我可以將類型更改為“文本”，但目前至少不是一種選擇。

謝謝。

Answer 1

如果要拒絕0-9和以外的任何輸入. ， 嘗試這個：

 Array.from(document.getElementsByClassName('restricted')).forEach(elem => { elem.addEventListener('input', event => { event.target.value = event.target.value.replace(/[^0-9\\.]/g, ''); }); }); 

 <input type="text" class="restricted"> 

您可以在任何輸入后添加.restricted以實現相同的效果。 不幸的是，這招不會與工作input[type="number"]因為event.target.value是''每當檢測到一個無效的輸入狀態。

Answer 2

沒有JavaScript

 :invalid { color: red } 

 <form method="post" action="https://httpbin.org/post"> <input type="number" name="num" pattern="[0-9]*[.,]?[0-9]+" min="0" step="any"> <!-- you won't be able to submit when the form is invalid --> <input type="submit"> </form> 

PS（瀏覽器采取正火的照顧,對. ）

Answer 3

試試這個事件：

粘貼：

https://developer.mozilla.org/en-US/docs/Web/Events/paste

Draging：

https://developer.mozilla.org/en-US/docs/Web/Events/drag

也許看看這個：

如何在Javascript中以編程方式制作控制字符？

編輯：

document.getElementById('id').addEventListener('paste', (e) => {
  let pre = e.target.value;
  window.setTimeout(() => {
    console.log(pre);
    console.log(e.target.value);
    /*
    Get the pasted value here, and edit the input
    */
  });
});

Answer 4

用這個：

它允許您在文本上使用任何類型的輸入過濾器，包括各種數字過濾器。 這將正確處理“復制+粘貼”，“拖動+拖放”，鍵盤快捷鍵，上下文菜單操作，不可鍵入的鍵以及所有鍵盤布局。

 function isNumberKey(evt){ var charCode = (evt.which) ? evt.which : event.keyCode if (charCode > 31 && (charCode < 48 || charCode > 57)) return false; return true; } 

 <input name="someid" onkeypress="return isNumberKey(event)"/> 

Answer 5

我已經提出過類似的建議，我使用了正則表達式來過濾任何字符的輸入值，只接受數字。 該解決方案的缺點是它僅接受整數，而不接受數字。 這是一個代碼示例：

handleChange = (e) => {
    const re = /^[0-9\b]+$/;
    if (e.target.value === '' || re.test(e.target.value)) {
         this.setState({Number: e.target.value})
      }
  }

我在此示例中使用reactjs，但是您當然可以調整代碼以實現您的目的