ホームページ > 記事 > ウェブフロントエンド > JavaScriptで入力を編集不可にする方法
JavaScriptで入力を編集不可にする方法
- WBOYオリジナル
- 2022-04-11 11:41:236728ブラウズ
方法: 1. 無効な属性設定を使用します。構文は「element object.disabled = true」です。 2. setAttribute() メソッドと readOnly 属性設定を使用します。構文は「element object.setAttribute( "readOnly"、true)"。
このチュートリアルの動作環境: Windows 10 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。
JavaScript で入力を編集不可に設定する方法
入力を編集不可に設定するには 2 つの方法があります。
#1.disabled 属性を使用する
disabled 属性はブール属性です。 disabled 属性は、どの 要素を無効にするかを指定します。 無効化された入力要素は使用できず、クリックできません。2. readonly 属性と setAttribute メソッドを使用する
readonly 属性は、入力フィールドが読み取り専用であることを指定します。 読み取り専用フィールドは変更できません。ただし、ユーザーはタブでフィールドに移動し、そのテキストを選択またはコピーすることができます。 readonly 属性は、特定の条件が満たされるまで (チェックボックスが選択されているなど)、ユーザーが値を変更できないようにします。次に、JavaScript を使用して読み取り専用値を削除し、入力フィールドを編集可能な状態に切り替える必要があります。 setAttribute() メソッドは、指定された名前とルールを持つ新しい属性を追加するか、既存の属性を指定された値に設定するために使用されます。構文は次のとおりです:elementNode.setAttribute(name,value)例は次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
</head>
<body>
<input id="txt" type="text" >
<input id="btn1" type="button" value="利用disabled不可编辑">
<input id="txt1" type="text" >
<input id="btn2" type="button" value="利用readOnly不可编辑">
<script>
var btn1 = document.getElementById('btn1');
btn1.onclick = function () {
var txt = document.getElementById('txt');
txt.disabled = true;
}
var btn1 = document.getElementById('btn2');
btn1.onclick = function () {
var txt = document.getElementById('txt1');
txt.setAttribute("readOnly", true);
}
</script>
</body>
</html>出力結果: 
##[関連する推奨事項:
以上がJavaScriptで入力を編集不可にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。