htmlにテキストボックスのプロンプト機能を実装するための様々な方法
2022-01-15 09:17:42
html5属性の < input ="text" placeholder="What you want to type" > を利用できます。
jsでも可能です cssのスタイルを追加する
<style type="text/css">
.in_search {
border:1 none;
color:#999999;
float:left;
font-size:14px;
height:18px;
line-height:18px;
margin:3px 2px;
width:253px;
}
</style>
<input name="q" class="in_search" onfocus="if(this.value=='Please enter what you want to enter'){this.value='';}" onblur="if(this.value=='Please enter what you want to enter'){this.value='';}" onblur=" quot;if(this.value==''){this.value='Please enter what you want to enter';}" type="text" value="Please enter what you want to enter"/>
jsでも可能です cssのスタイルを追加する
コピーコード
コードは以下の通りです。
<style type="text/css">
.in_search {
border:1 none;
color:#999999;
float:left;
font-size:14px;
height:18px;
line-height:18px;
margin:3px 2px;
width:253px;
}
</style>
<input name="q" class="in_search" onfocus="if(this.value=='Please enter what you want to enter'){this.value='';}" onblur="if(this.value=='Please enter what you want to enter'){this.value='';}" onblur=" quot;if(this.value==''){this.value='Please enter what you want to enter';}" type="text" value="Please enter what you want to enter"/>
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン