How to disable or enable text box input in js-JS Tutorial-php.cn

How to disable or enable text box input in js

青灯夜游

Release： 2018-11-21 10:58:29

Original

6956 people have browsed it

How to disable or enable text box input? This article will introduce to you how to use pure js to disable or enable text box input. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

It is actually very simple to disable or enable text box input in js. You can only use the disabled attribute to achieve the function. Let's take a look at the relevant knowledge of the disabled attribute.

The disabled attribute can be used to set or return whether the radio button is disabled.

Basic syntax:

radioObject.disabled=true|false

Copy after login

false: means enabling text box input;

true: means prohibiting text box input.

Let’s use a simple example to introduce how js uses the disabled attribute to disable or enable text box input?

Ideas:

1) Use getElementById() to get the text field

2) Use a button to fire a function that enables or disables text field input: enable() and disable() function

3) Use the enable() and disable() functions to set the disabled field of the text box to true or false

Implementation code:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>如何使用JavaScript启用或禁用输入</title>
	</head>

	<body>
		<h2>使用JavaScript启用和禁用文本字段</h2>
		<form id="registration-form">
			输入您的姓名：
			<input type="text" id="name">
		</form><br />
		<button onclick="disable()">禁用文本字段</button>
		<button onclick="enable()">启用文本字段</button>
		<script>
			function disable(){
				//
				document.getElementById("name").disabled=true;
			}

			function enable(){
				document.getElementById("name").disabled = false;
			}
		</script>

	</body>

</html>

Copy after login

Running effect :

How to disable or enable text box input in js

When you click the "Disable Text Field" button, the disable() function will be called, and the text field's disabled attribute disabled will be set to true, which means you can no longer Enter text in this text field and it will be disabled.

Clicking the "Enable Text Field" button will re-enable the text field, which can call the enable() function, which resets the disabled attribute to false.

The above is the entire content of this article, I hope it will be helpful to everyone's study. Recommended more related video tutorials: JavaScript tutorial!

The above is the detailed content of How to disable or enable text box input in js. For more information, please follow other related articles on the PHP Chinese website!