Home > Article > Web Front-end > js sets input text box read-only

js sets input text box read-only

PHP中文网Original: 2017-03-18 11:23:373465browse

Controlinput box read-only can prevent users from changing data, which is quite practical in some cases. Let’s use js to complete this read-only implementation

<html> 
<head> 
<title> New Document </title> 
<meta name="Generator" content="EditPlus"> 
<meta name="Author" 
content=""> 
<meta name="Keywords" content=""> 
<meta 
name="Description" content=""> 
</head> 
<script 
language="JavaScript"> 
function isreadonly(){ 
var obj = 
document.getElementById("username"); 
obj.setAttribute("readOnly",true); 
obj.style.backgroundColor="#d2d2d2"; 
} 
function readwrite(){ 
var 
obj = document.getElementById("username"); 
obj.setAttribute("readOnly",false); 
obj.style.backgroundColor="#ffffff"; 
} 
</script> 
<body> 
<form name="addform" 
id="addform" method="post" action="" > 
<input type="text" 
id="username" name="username"> 
<input type="button" name="只读" 
value="read" onclick="isreadonly();"> 
<input type="button" name="可写" 
value="write" onclick="readwrite();"> 
</form> 
</body> 
</html> 
<!-- 
点击“read”按钮，input框不能书写，且变灰；点击“write”按钮，input框恢复。 
-->

The above are the details of js setting input text box read-only , please pay attention to other related articles on the php Chinese website for more information!

Set all form objects as read-only through js

How to process the form to make input and other text boxes read-only and non-editable

Use js to dynamically control the read-only attribute of the input box

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript实现弹出广告功能代码Next article：javascript - ajax局部刷新（前端新手，ajax也是这两天刚接触，还不太懂，求指教）

See more

js sets input text box read-only

Related articles