时间戳

首页 > 解决方案 > 扩展功能以防止在输入字段内粘贴

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

问题描述

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

我可以做一个 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"/>

编辑：

我还发现该标志^仍然有效但没有事件？这怎么可能？

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

编辑2：

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

<input type="number"/>

标签： javascriptjqueryhtml

解决方案

下面的代码以某种方式处理 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>

推荐阅读