2020年7月6日 新型肺炎ウィルスの影響を受けて、お問い合わせ対応時間が10時~18時となっております。ご迷惑をおかけしますが宜しくお願い申し上げます。
テキストフォーム 未入力 表示

テキストフォームに未入力時は表示させ、書き込まれたら消す。 jQuery

テキストフォーム 未入力 表示

テキストフォームの未入力時の表示

フォームを選択すると文字が消えます。
ユーザーの使いやすさの向上に使われる事があります。

 

派手な効果はないものの

単純なCSS操作だけでなく、少しプログラムの要素が絡んでいるので
これを理解できれば儲けものです。
覚えてみると色々応用がきくのでいいかもしれません☆

 

DEMO

 

【jQuery】

[javascript] <script>
$(function(){
var target;
$(“#target”).show(function(){
//変数targetはtitleの値が入る。
target = $(“#target”).attr(“title”);
//#targetがtitleと等しい時、または空の時に#targetの値はtitleが入る。
if($(“#target”).val() == target || $(this).val() == ”)
$(this).val(target);
});
$(“#target”).focus(function(){
if($(this).val() == target )
$(“#target”).val(“”);
}).blur(function(){
if($(“#target”).val() == ”)
$(this).val(target);
});

});
</script>
[/javascript]

【HTML】

[html] <input type=”text” name=”target” id=”target” title=”座右の銘を入力。”>
[/html]

※.showは非表示状態にあるものを表示します。
※既に表示されているものに.showをしても何も起こりません。
※今回の場合、valが初期値では空なので、値を代入し表示させます。

参考:http://zura.org/prog/js/graydefaultinput/

 

 

テキストフォーム 未入力 表示
最新情報をチェックしよう!
>システム構築・保守に特化した会社です。

システム構築・保守に特化した会社です。

システムの構築・保守運用「システムガーディアン」 社内システム担当が欲しいが、専属で雇うほどの仕事量はない。 必要な時に必要なだけ頼りたいというお悩みを持つ企業様へ専門知識を持って対応を行っております。 サーバから各種システムまで自社・他社で構築されたシステムに対してサポートを行っております。

CTR IMG