【html】四种方法禁止输入框输入

最新推荐文章于 2022-11-17 12:07:59 发布

向着光芒的女孩

最新推荐文章于 2022-11-17 12:07:59 发布

阅读量2.3k

点赞数 1

分类专栏： javascript 文章标签：禁止输入框输入的方法

本文链接：https://blog.csdn.net/ann295258232/article/details/53230715

版权

javascript 专栏收录该内容

52 篇文章 3 订阅

订阅专栏

方法一：disabled
方法二：disabled=“disabled”
方法三：readonly
方法四：通过Javascript先获取焦点再失去焦点

完整例子具体代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>禁止输入</title>
</head>
<body>
	<div>方法一：表单元素特殊属性一 disabled <input type="text" value="禁止输入" disabled/></div>
	<div>方法二：表单元素特殊属性二 disabled="disabled"<input type="text" value="禁止输入" disabled="disabled"/></div>
	<div>方法三：表单元素特殊属性三  readonly<input type="text" value="禁止输入" readonly/></div>

	<div>方法四：通过失去焦点事件来控制文本 .onfocus .onblur
		<input type="text" value="禁止输入" id="inhibitingInput" />
	</div>

	<script>
		var _inhibitingInput = document.getElementById("inhibitingInput");
		_inhibitingInput.onfocus = function(){
			_inhibitingInput.blur();
		}
	</script>	
</body>
</html>

效果如下：
这里写图片描述

向着光芒的女孩

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【html】四种方法禁止输入框输入

方法一：disabled 方法二：disabled=”disabled” 方法三：readonly 方法四：通过Javascript先获取焦点再失去焦点完整例子具体代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>禁止输入</title></head><body> <di
复制链接

扫一扫