JS控制文本框只读状态（普通、EasyUI的textbox）

FlowZh

于 2020-05-02 22:18:30 发布

阅读量5.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：随笔 # 前端文章标签： javascript easyui

本文链接：https://blog.youkuaiyun.com/Alone_in_/article/details/105895943

随笔同时被 2 个专栏收录

29 篇文章

订阅专栏

前端

24 篇文章

订阅专栏

本文探讨了使用原生JavaScript与EasyUI框架在网页中修改文本框的只读属性的方法。通过实例展示了如何在点击事件和键盘事件中切换文本框的可编辑状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、普通文本框

用原生获取DOM元素的方法去获取可以进行改变，但是改用 $('#test') 这种反而不起作用。

<body>
	<a>测试：</a><input id="test" type="text" readonly="readonly"><br>
	<button onclick="clickTest()">点击</button>
	<script type="text/javascript">
	    function clickTest(){
	        console.log('test');
	        document.getElementById("test").readOnly = false;
	    }
	</script>
</body>

二、EasyUI的 textbox

我尝试过用普通文本框的方法去设置，但是没反应，最后查到了这个，测试了一下是ok的。

<body>
	<a>测试：</a><input id="test" name="test" class="easyui-textbox" >
	<script type="text/javascript">
	    $(function() {
	        //Enter回车触发事件
	        $('#test').textbox('textbox').bind('keyup', function(e){
	            if (e.keyCode == 13){
	                $('#test').textbox('textbox').attr('readonly',true);
	            }
			});
		});
	</script>
</body>

随手记录，睡啦 ~