JSで入力ヒントのplaceholder（プレースホルダー）属性を設定する
HTMLのテキストボックスやtextarea要素に対して、 入力ヒントとなるプレースホルダー(placeholder)属性を設定するのは JavaScriptでもできます。 その場合placeholderプロパティを使用します。
次のサンプルコードは、id="test"のテキストボックスに プレースホルダー(placeholder)を設定しています。
let elem = document.getElementById("test");
elem.placeholder = "入力ヒント";
別の方法として、setAttributeメソッドを使用する方法もあります。 その場合のコードは次の通りです。
let elem = document.getElementById("test");
elem.setAttribute("placeholder", "入力ヒント");
次のように薄いグレー色で入力ヒントが表示されます。
プレースホルダー(placeholder)に改行を含めたい場合
textarea要素は複数行の入力が可能なテキストボックスなので、 入力ヒントも複数行にわたって表示できます。
次のサンプルコードでは id="test2" のtextarea要素（複数行テキストボックス）に、 複数行にわたってプレースホルダー(placeholder)を表示します。
let elem2 = document.getElementById("test2");
elem2.placeholder = "1行目\n2行目";
このように「\n」を使用することで改行を含めることができます。
長い文章であれば、テンプレート文字列を使った方が可読性が良くなります。 テンプレート文字列は「`」バッククォートで文字列を囲みます。
let elem2 = document.getElementById("test2");
elem2.placeholder = `1行目のヒント
2行目のヒント
3行目のヒント`;
次のように複数行の入力ヒントが表示されます。