コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery_jqueryをベースに入力ボックスに値がない場合に指定したデータを自動表示する実装コード

jQuery_jqueryをベースに入力ボックスに値がない場合に指定したデータを自動表示する実装コード

WBOY
リリース： 2016-05-16 18:11:29
オリジナル
1001 人が閲覧しました

【解決策】

1.準備

(1)入力ボックス

コードをコピーコードは次のとおりです:



(2) ) CSS コード
コードをコピー コードは次のとおりです:

input.helpText { color: #aaa;}

(3) 変換方法
コードをコピー コードは以下の通りです。

関数 switchText()
{
if ($(this).val() == $(this).attr('title'))
$(this ).val('') .removeClass('helpText');
else if ($.trim($(this).val()) == '')
$(this).addClass(' helpText').val($(this).attr('title'));
}

(4) 具体的な実装
コードをコピー コードは次のとおりです:

$('input[type=text][title!=""]').each(function) () {
if ($.trim($(this).val()) == '') $(this).val($(this).attr('title')); ($(this).val() = = $(this).attr('title')) $(this).addClass('helpText')
}).focus(switchText).blur(switchText); ;

$(' フォーム').submit(function() {
$(this).find('input[type=text][title!=""]').each(function () {
if ($( this).val() == $(this).attr('title')) $(this).val('')
; });


2. 参考記事

http://webservices.blog.gustavus.edu/2008/06/23/text -input-example-text-with-jquery /
関連ラベル：
入力ボックス
ソース：php.cn
前の記事：JQuery はテーブルへの行の動的追加と削除を改善しました version_jquery 次の記事：配列の一般的な JavaScript オペレーション コード 配列メソッドのまとめ_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
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート