HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLDOM入力パスワードプレースホルダープロパティ

HTML DOM入力パスワードプレースホルダープロパティは、入力パスワードフィールドのプレースホルダー属性値を設定または返すために使用されます。プレースホルダープロパティは、ユーザーが何かを入力する前に入力フィールド内にテキストを表示することにより、Webページのユーザーに入力要素に関するヒントを与えるために使用されます。プレースホルダーテキストはデフォルトで灰色で表示され、valueプロパティとは異なりフォームに送信されません。

構文

以下は、-

の構文です。

プレースホルダープロパティの設定-

passwordObject.placeholder = text

ここで、textは、パスワードフィールドに関するユーザーへのヒントを指定するプレースホルダーテキストを表します。

例

入力パスワードプレースホルダープロパティの例を見てみましょう-

<!DOCTYPE html>
<html>
<body>
<h1>password placeholder property</h1>
Password: <input type="password" id="PASS1" placeholder="....">
<p>Change the placeholder text of the above field by clicking the below button</p>
<button onclick="changeHolder()">CHANGE</button>
<script>
   function changeHolder() {
      document.getElementById("PASS1").placeholder = "Enter your password here..";
   }
</script>
</body>
</html>

出力

これにより、次の出力が生成されます-

HTMLDOM入力パスワードプレースホルダープロパティ

変更ボタンをクリックすると-

HTMLDOM入力パスワードプレースホルダープロパティ

上記の例では-

最初に、IDが「PASS1」でプレースホルダー属性値が「…。」に設定された入力パスワードフィールドを作成しました。

Password: <input type="password" id="PASS1" placeholder="....">

次に、ユーザーがクリックしたときにchangeHolder（）メソッドを実行するボタンCHANGEを作成しました-

<button onclick="changeHolder()">CHANGE</button>

changeHolder（）は、getElementById（）メソッドを使用して、パスワード型の入力要素を取得します。次に、プレースホルダーのプロパティ値を「ここにパスワードを入力してください。」に設定します。これは、パスワードフィールド-

に反映されます。 
function changeHolder() {
   document.getElementById("PASS1").placeholder = "Enter your password here..";
}

  1. HTMLDOM入力パスワードreadOnlyプロパティ

    HTML DOM入力パスワードreadOnlyプロパティは、入力パスワードフィールドが読み取り専用かどうかを設定または返すために使用されます。 readOnlyプロパティを使用すると、要素は編集できなくなりますが、タブまたはクリックでフォーカスを合わせることができます。読み取り専用要素内にデフォルト値がある場合、送信時にサーバーに送信されます。 構文 以下は、-の構文です。 readOnlyプロパティを設定します- passwordObject.readOnly = true|false ここで、trueはパスワードフィールドが読み取り専用であることを表し、falseはそれ以外の場合を表

  2. HTMLDOMTextareaプレースホルダープロパティ

    HTML DOM Textareaプレースホルダープロパティは、HTMLドキュメントのテキストエリア要素のプレースホルダー属性の値を返し、変更します。 構文 以下は構文です- 1。プレースホルダーを返す object.placeholder 2。プレースホルダーの追加 object.placeholder = “text” HTML DOM Textareaプレースホルダープロパティの例を見てみましょう： 例 <!DOCTYPE html> <html> <style>    body {