inputやtextareaの入力欄に画面表示時に最初から文字を表示する方法について書いていきます。HTMLで簡単に表示させることが可能なのですが、もし変数を入れたりしたい場合はJavascriptを使うこともあるかもしれません。
ということでJavascriptで初期表示時に文字を入力欄に表示させたいと思います。
HTMLの場合
Javascriptの前にHTMLではどのようにすれば文字を表示させられるのか簡単に説明します。inputタグを例にして書いていますが、textareaタグも同様の属性を付けることで文字を表示できます。
placeholderを使う
<input type=”text” placeholder=”初期表示時に表示する文字列” ></input>
見た目
valueを使う
<input type=”text” value=”初期表示時に表示する文字列” ></input>
見た目
※valueの場合は実際に送信する際に値が送られます。
Javascriptの場合
Javascriptの場合はplaceholderとvalueでそこまで差はありません。
placeholderのサンプルコード
See the Pen inputに初期表示時に文字を表示 placeholder by Nakamoto (@programmerlife) on CodePen.
Javascriptコード
codepenと同じですが、参考までに載せます。
// id
let text1 = document.querySelector('#id1');
text1.placeholder = "Hey";
// class
let text2 = document.querySelector('.class1');
text2.placeholder = "Hello";
// name
let text3 = document.querySelector("input[name='name1']");
text3.placeholder = "Hi.";
// name テキストエリア
let text4 = document.querySelector("textarea[name='name1']");
text4.placeholder = "Hi."値を取得するのにquerySelectorを使っています。getElementById(‘id’)などに置き換えたい場合は以下を参考にしていただければと思います。
valueのサンプルコード
See the Pen inputに初期表示時に文字を表示 value by Nakamoto (@programmerlife) on CodePen.
Javascriptコード
codepenと同じですが、参考までに載せます。placeholderがvalueに変わっただけなのがわかると思います。
// id
let text1 = document.querySelector('#id1');
text1.value= "Hey";
// class
let text2 = document.querySelector('.class1');
text2.value= "Hello";
// name
let text3 = document.querySelector("input[name='name1']");
text3.value= "Hi.";
// name テキストエリア
let text4 = document.querySelector("textarea[name='name1']");
text4.value= "Hi."おわり
思ったより簡単に作成できました。placeholderは聞いたことがあったのでどこかで使ったと思うのですが、すっかり忘れていました。
querySelectorは便利ですね。コードを作成する時間がかなり短縮できた気がします。
参考
https://www.w3schools.com/jsref/prop_text_placeholder.asp
