How to set javascript to be non-editable-JS Tutorial-php.cn

How to set javascript to be non-editable

青灯夜游

Release： 2023-01-06 11:17:45

Original

7098 people have browsed it

In javascript, you can use the disabled attribute of the Checkbox object to set it to be non-editable. You only need to set the value of the disabled attribute of the specified element tag to "true". The syntax format is "element object.disabled=true; ".

How to set javascript to be non-editable

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

JavaScript-Set the text box to be non-editable

We need to first create an HTML skeleton, which can be quickly generated by the compiler.

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
 
</body>
</html>

Copy after login

Then we enter the basic content.

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<input type="text" >
	<input type="button" value="禁用">
</body>
</html>

Copy after login

Then the next step is to write JavaScript events to implement the disabling function

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<input id="txt" type="text" >
	<input id="btn1" type="button" value="禁用">
	<script> 
		var btn1 = document.getElementById(&#39;btn1&#39;);
		btn1.onclick = function () {
			var txt = document.getElementById(&#39;txt&#39;);
			txt.disabled = true;
		}
	</script>
</body>
</html>

Copy after login

Optimize it: enter numbers in the text box, and after clicking disable, you will no longer be able to enter numbers in the text box, and then continue Just write the "enable" function. In fact, enabling functions is almost the same as disabling functions. Just change "disabled = true" to "disabled = false". The code is as follows:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<input id="txt" type="text" >
	<input id="btn1" type="button" value="禁用">
	<input id="btn2" type="button" value="启用">
	<script> 
		var btn1 = document.getElementById(&#39;btn1&#39;);
		btn1.onclick = function () {
			var txt = document.getElementById(&#39;txt&#39;);
			txt.disabled = true;
		}
 
		var btn2 = document.getElementById(&#39;btn2&#39;);
		btn2.onclick = function () {
			var txt = document.getElementById(&#39;txt&#39;);
			txt.disabled = false;
		}
	</script>
</body>
</html>

Copy after login

[Related recommendations: javascript learning tutorial】

The above is the detailed content of How to set javascript to be non-editable. For more information, please follow other related articles on the PHP Chinese website!