Home >Web Front-end >JS Tutorial >How to set javascript to be non-editable
How to set javascript to be non-editable
- 青灯夜游Original
- 2021-06-18 14:04:007055browse
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; ".
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>
Then we enter the basic content.
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <input type="text" > <input type="button" value="禁用"> </body> </html>
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('btn1');
btn1.onclick = function () {
var txt = document.getElementById('txt');
txt.disabled = true;
}
</script>
</body>
</html>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('btn1');
btn1.onclick = function () {
var txt = document.getElementById('txt');
txt.disabled = true;
}
var btn2 = document.getElementById('btn2');
btn2.onclick = function () {
var txt = document.getElementById('txt');
txt.disabled = false;
}
</script>
</body>
</html>[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!