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

最新推荐文章于 2024-10-08 18:10:56 发布

原创最新推荐文章于 2024-10-08 18:10:56 发布 · 5.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #easyui

随笔同时被 2 个专栏收录

29 篇文章

订阅专栏

前端

24 篇文章

订阅专栏

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

一、普通文本框

用原生获取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>