javascript - 扩展功能以防止在输入字段内粘贴

Question

我目前正试图阻止在输入字段中键入所有内容而不是数字和点。问题是粘贴字母或奇怪的东西仍然有效。那么有没有办法在我的函数中阻止它呢？

我可以做一个像 onpaste="return false;" 这样的 HTML 部分，但也许有一个更好的解决方案可以使用我的可用函数。感谢您的帮助!

jQuery( document ).ready( function ( $ ) {
	$( document ).on( "keypress keyup paste", "#test", function ( event ) {
		let input = $( this ).val();

		console.log(input);
		console.log(event.which);
		
		if ( ( event.which !== 46 || $( this ).val().indexOf( '.' ) !== -1 ) && ( event.which < 48 || event.which > 57 ) ) {
			event.preventDefault();
		} else if ( ( input.indexOf( '.' ) !== -1 ) && ( input.substring( input.indexOf( '.' ) ).length > 2 ) ) {
			event.preventDefault();
		}
	} );
} );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="test"/>

编辑:

我还发现符号 ^ 仍然有效但没有事件？这怎么可能？

想法是只允许带有小数点和两位小数的数字，例如 22222.22。

编辑 2:

输入类型数字不起作用，因为它不仅允许数字和点。

<input type="number"/>

Answer 1

下面的代码以某种方式处理 ctrlX、ctrlV、^，并允许小数输入

const input = document.querySelector('input')
let old = input.value
input.addEventListener('input', function() {
  if (!this.checkValidity()) {
    this.value = old
  } else {
    old = this.value
  }
})

<input type="text" pattern="\d+(\.[\d]{0,2})?"/>

---

对于动态添加的输入(通过使用事件委托(delegate))，我们可以将旧属性存储在输入本身上

jQuery( document ).ready( function ( $ ) {
  $( document ).on( "input", "input.decimals", function ( event ) {
  if (!this.checkValidity()) {
    this.value = this.dataset.old || ''
    } else {
      this.dataset.old = this.value
    }
    return true
  })
  const pattern = '\\d+(\\.[\\d]{0,2})?'
  document.querySelector('div').innerHTML += `<input class="decimals" type="text" pattern="${pattern}"/>`.repeat(2)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>