コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

入力ボックスのプロンプト情報の表示と非表示を制御するメソッド_javascript スキル

WBOY
リリース： 2016-05-16 17:00:21
オリジナル
2735 人が閲覧しました

html css javascrpt を使用してページを作成する場合、ユーザー エクスペリエンスに影響を及ぼし、見落としがちな小さな詳細に遭遇することがよくあります。たとえば、オブジェクトがフォーカスを取得したりフォーカスを失ったりするのに応じて、入力ボックス内のプロンプト情報を表示または非表示にするにはどうすればよいでしょうか。今日はここにいますので、マスターの皆さんが間違いを犯さないことを願っています~~~

1. 要件

入力ボックスを入力し、プロンプト情報を非表示にします。カーソルが表示されているとき ; カーソルが入力ボックスから離れると、プロンプト メッセージが表示されます。

2. メソッド

1. 入力に ID 名を付けます。Onfocus="メソッド名 1 (この)"、onblur="メソッド名 2 (この)"

2. 変数値を宣言し、ID 名を通じて入力を取得します

3. 関数メソッド名 1 (inputObj){

コードをコピーします> コードは次のとおりです。
if(inputObj.value==”…”){

inputObj.value=””;
}

}


4. 関数メソッド名 2 (inputObj){


コードをコピー コードは次のとおりです:
if(inputObj.value==””){

inputObj.value="…”;

}

}


5. 注: 同じ設定を必要とする入力タグが同じページに複数ある場合、メソッド名は一貫していません。

3. 例


コードをコピーします コードは次のとおりです:
;html xmlns ="http://www.w3.org/1999/xhtml">


無題ドキュメント

style type="text/css">
/*次のテキストは IE ブラウザの入力ボックスの背景色を変更できます*/
.search input{star :expression(onmouseover =function(){
this.style.backgroundColor="#FF0000"
},
onmouseout=function(){
this.style.backgroundColor="#FFFFFF"
})
}






関連ラベル：
プロンプトメッセージ
ソース：php.cn
前の記事：IE8 の通常モードでチェックされた jquery 選択に関する問題_jquery 次の記事：raphael.jsで中国地図を描く 地図描画方法_JavaScriptスキル
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Web サイトから入力要素を取得できません そこで、Twitter から入力要素を取得しようとしていますが、それを実行すると、ノード ターミナルでこのようなエラーが表示され続け、その結果、このコードによって作成されたブラウザ...
から 2024-04-06 18:59:57
0
1
442
入力フィールドメソッドの戻り値の合計を取得します。 ユーザーが入力した合計値を見つけようとしています。数値と同じ値を乗算する集計を取得します letDem200=document.querySelector(".input...
から 2024-04-06 18:19:37
0
1
380
部分的な値の条件でクエリを記録する - SQL スキルの共有 zipcode というテーブルがあり、code という列があります。コード列には、郵便番号のプレフィックスが含まれています (例: 395453302120312)。指定された郵便...
から 2024-04-06 16:01:26
0
1
395
クリア後​​も自分のファイル入力の値が残る スクリーンショットでわかるように。ファイルを選択し、ページを更新せずにポップアップを保持し、再度開くと、ファイル入力は選択したファイルのままです。 <inputid=&quo...
から 2024-04-06 15:44:52
0
1
384
固定配置された子によって親のパディングが無視される スティッキー要素がヘッダーの後ろに来るのを防ぐにはどうすればよいですか?現在のコードスニペットは親にpadding-topを使用しており、追加の子にmargin-topまたは透明な...
から 2024-04-06 11:42:51
0
1
338
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート