js 控制打开对话框文本框不可编辑

JavaScript023

js 控制打开对话框文本框不可编辑,第1张

文本框不可以编辑可以用两个属性来控制：

readonly，只读属性，文本可以选择、复制，但是不可以改变文本值

disabled，不可选择、复制、改变文本值。

  js控制打开对话框的时候，同时改变对话框中的文本框的属性即可。

jq方法

$("input[type=text]").prop('readonly','readonly')

或者

$("input[type=text]").prop('disabled','disabled')

以下答案为纯原生(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中的语句把"不"字去除。