当前位置：首页 - 正文

Js里怎么在input框里禁止输入某个文字?

发布网友发布时间：2022-04-30 18:18

我来回答

共4个回答

懂视网时间：2022-05-14 18:08

如何禁止或启用文本框输入？本篇文章就给大家介绍使用纯js实现禁止或启用文本框输入的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

在js中实现禁止或启用文本框输入其实很简单，只有使用disabled 属性就可以实现功能。我们来看看disabled 属性的相关知识。

disabled 属性可用于设置或返回是否禁用单选按钮。

基本语法：

radioObject.disabled=true|false

false：表示启用文本框输入；

true：表示禁止文本框输入。

下面我们通过简单示例来介绍js如何使用disabled 属性来实现禁止或启用文本框输入？

思路：

1）使用getElementById（）获取文本字段

2）使用按钮激发启用或禁用文本字段输入的函数：enable（）和disable（）函数

3）利用enable（）和disable（）函数将文本框的disabled 字段设置为true或false

实现代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>如何使用JavaScript启用或禁用输入</title>
	</head>

	<body>
		<h2>使用JavaScript启用和禁用文本字段</h2>
		<form id="registration-form">
			输入您的姓名：
			<input type="text" id="name">
		</form><br />
		<button onclick="disable()">禁用文本字段</button>
		<button onclick="enable()">启用文本字段</button>
		<script>
			function disable(){
				//
				document.getElementById("name").disabled=true;
			}

			function enable(){
				document.getElementById("name").disabled = false;
			}
		</script>

	</body>

</html>

运行效果：

单击“禁用文本字段”按钮时，将调用disable()函数，文本字段的禁用属性disabled将设置为true，这意味着你无法再在此文本字段中输入文本，它将被禁用了。

单击“启用文本字段”按钮将重新启用文本字段，它可以调用enable()函数，该函数将disabled属性重置为false。

热心网友时间：2022-05-14 15:16

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

热心网友时间：2022-05-14 16:34

给input添加个change事件，然后事件代码用repleace函数把input.value的本字替换为空并赋值回去就行了
eg:value = value.repleace('本', '')

热心网友时间：2022-05-14 18:09

两种方法：1、<input type="text" name="noedit" size="20" disabled="disabled" value="不可编辑">，这种方法可以让文本框不可编辑，但同时会导致服务端不能获取该文本框的值。2、<input type="text" name="noedit" size="20" readonly="readonly" value="不可输入">，这种方法可让文本框不可输入，但服务端可以获取该文本框的值。是什么需求就怎么用吧。

声明：本网页内容为用户发布，旨在传播知识，不代表本网认同其观点，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。
E-MAIL:11247931@qq.com

焦点

Js里怎么在input框里禁止输入某个文字?

最新推荐

猜你喜欢

热门推荐