Question

我目前正在尝试阻止在输入字段中键入所有内容，而不是数字和点。问题在于粘贴字母或奇怪的东西仍然有效。那么有什么方法可以防止它发生吗？

我可以做类似I love cats的HTML部分，但是也许有一个更好的解决方案可以使用我的可用功能。感谢您的帮助！

onpaste="return false;"

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"/>仍然可以使用，但是没有事件吗？这怎么可能？

这个想法是只允许带点和两位小数的数字，例如^。

编辑2：

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

22222.22

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})?"/>

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

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>

Answer 2

您可以尝试使用以下代码段在目标元素（例如#txtInput元素）上明确禁用剪切，复制或粘贴功能：

 $(document).ready(function(){
   $('#txtInput').on("cut copy paste",function(e) {
      e.preventDefault();
   });
});

有关如何执行此操作的更多信息here: How to prevent pasting into input fields。

Answer 3

您是否尝试过使用input类型的number的简单解决方案？

例如<input type="number" />

有一个警告，可以输入字母“ e”，即欧拉数

扩展功能以防止粘贴到输入字段中

3 个答案: