JS怎么禁止文本框输入文字?

JavaScript032

JS怎么禁止文本框输入文字?,第1张

要禁止文本框输入,那么就是说这个文本框只能被读即它应该有用readonly属性。

readonly属性是只读属性,表明当前的dom节点只能被读取。

用js的方法得到这个文本框节点,然后添加readonly属性,使其值等于="readonly"就可以了。

例如:

html

<input id="aa"/>

js

var input=document.getElementById("aa")

input.setAttribute("readonly","readonly")

以上就可以了

function isChn(str){

var reg = /^[u4E00-u9FA5]+$/

if(!reg.test(str)){

return false

}

return true

}

试试这个。

以下答案为纯原生(vanilla Javascript)方法,实际可以用react、vue之类的库,通过数据绑定的方法实现这种功能。我用的是ECMAScript6的写法,其中let, const关键字老版本IE可能不识别,可以全部换成var。

在var fir = document.getElementById("fir")语句后面加入

function inputHandler (e) {

  e.target.value = e.target.value.replace(/不/g, '')

}

let _debounceTimerId

function debounce (f, ms) {

  const self = this

  return function() {

      const args = arguments

      _debounceTimerId &&clearTimeout(_debounceTimerId)

      _debounceTimerId = setTimeout(function() {

          f.apply(self, args)

      }, ms)

  }

}

fir.addEventListener('input', debounce(inputHandler, 50))

解释:

1、使用HTMLInputElement实例的input事件,该事件在每次键入后都会触发

2、中文输入法在单次键入后,会多次触发input事件,两次触发间隔大概在1-2ms左右

3、为了防止多次触发,需要使用debounce(不知道怎么翻译,暂且用数字电路的“限制抖动”的概念吧),我上面写了一个我自己编的debounce函数,实际可以用现成的库函数,比如Lodash的_.debounce()

4、debounce(inputHandler, 100) 会保证抖动结束100ms后,运行inputHandler中的语句把"不"字去除。