Stackoverflow でのプレースホルダーの動作に注目してください。タイトルを質問し、Twitter のサインアップフォームで次のようにします。 https://twitter.com/signup
プレースホルダーには 2 つの状態があります。
- 選択されていません (プレースホルダーが表示されます)
- 選択されているが、入力が 0 (プレースホルダーが表示され、明るい色)
これをサポートするjQueryプラグインを知っている人はいますか? #1 をサポートする jQuery プレースホルダー プラグインを見ましたが、#2 はサポートしていません。
ありがとう
回答：
回答№1の場合は7以下に、簡単で簡単な例を示します。
HTML
<input type="text" id="in" value="Enter Something...">
JavaScript
$("#in").bind({
click : function() {
$(this).css("color","#ccc");
},
focusout : function() {
$(this).css("color","#000");
},
keydown : function() {
$(this).val("");
$(this).css("color","#000");
$(this).unbind("keydown");
$(this).unbind("click");
},
});
がんばろう
編集: 機能を増やし、プラグインとしてパッケージ化しました。 ギター、 jQueryプラグインサイト または プロジェクトホーム (デモとドキュメントが利用可能)
回答№2の場合は1
あなたは 永続的なプレースホルダー アプローチ（jsfiddle 含まれています）。それは label タグは、必要なものを取得するためのプレースホルダーのように機能します。つまり、テキストは引き続き表示されますが、フォーカスがあっても入力がない場合は明るくなります。
マークアップの例を次に示します。
<div class="input-wrapper">
<label for="id_username">Username</label>
<input id="id_username" type="text" name="username">
</div>
必要な処理を行うための追加の JS と CSS がいくつかあります。これは、twitter や tumblr が行う方法と非常によく似ています。このアプローチのいくつかの良い副作用は次のとおりです。
- プレースホルダー テキストがフォームのデータを台無しにすることを心配する必要はありません
- プレースホルダーはパスワードフィールドで機能します
- アクセス可能なマークアップ
回答№3の場合は1
これは自分のプロジェクト用に書きましたが、うまく機能し (jQuery が必要)、実装が非常に簡単です。実際には、ネイティブのプレースホルダー サポートよりもうまく機能し、Twitter のサインアップと同じように機能します。
特徴：
- プレースホルダーは灰色のテキストで、フォーカスが合うと薄い灰色に変わります。
- 入力フィールドに何も入力されていない場合はいつでもプレースホルダーを使用できます (削除すると表示されます)
- プレースホルダー内の任意の場所をクリックすると、テキスト カーソルがフィールドの先頭に移動します。つまり、ハイライト表示したり、その途中で入力したりすることはできません。
- タブとマウス、および入力の再利用の両方で入力を前後にスムーズに移動します
- 1 つまたはすべての入力フィールドで使いやすい ( .placeHolder(); )
- <1kb
1.このスクリプトをテキスト ファイルにコピーし、placeholder.js として保存して、js ディレクトリにアップロードします。
(function( $ ){
$.fn.placeHolder = function() {
var input = this;
var text = input.attr("placeholder"); // make sure you have your placeholder attributes completed for each input field
if (text) {
input.val(text).css({ color:"grey" });
input.focus(function(){
if (input.val() === text) input.animate({ color:"lightGrey" }, 350).selectRange(0,0).one("keydown", function(){
input.val("").css({ color:"black" });
});
});
input.blur(function(){
if (input.val() == "" || input.val() === text) input.val(text).css({ color:"grey" });
});
input.keyup(function(){
if (input.val() == "") input.val(text).css({ color:"lightGrey" }).selectRange(0,0).one("keydown", function(){
input.val("").css({ color:"black" });
});
});
input.mouseup(function(){
if (input.val() === text) input.selectRange(0,0);
});
}
};
$.fn.selectRange = function(start, end) {
return this.each(function() {
if (this.setSelectionRange) { this.setSelectionRange(start, end);
} else if (this.createTextRange) {
var range = this.createTextRange();
range.collapse(true);
range.moveEnd("character", end);
range.moveStart("character", start);
range.select();
}
});
};
})( jQuery );
1 つの入力のみで使用するには
$("#myinput").placeHolder(); // just one
<script type="text/javascript" src="../js/placeholder.js"></script> //include this in your header unless you are going to implement the placeholders for just non-HTML5 browsers. In that case see below.
すべての入力フィールドで使用するには
$(":input").each(function(){ // this will work for all input fields
$(this).placeHolder();
});
<script type="text/javascript" src="../js/placeholder.js"></script> // include in header / change src to your actual js directory
これは、ブラウザーが HTML5 プレースホルダー属性をサポートしていない場合にのみ、サイトのすべての入力フィールドに実装することをお勧めする方法です。
var placeholder = "placeholder" in document.createElement("input");
if (!placeholder) { // if the browser does not support placeholder, then use this script
$.getScript("../js/placeholder.js", function() { // save the above script as placeholder.js
$(":input").each(function(){ // this will work for all input fields
$(this).placeHolder();
});
});
}
送信するときは、プレースホルダーの値を削除することを忘れないでください。
$("#submit").click(function(){
var text = this.attr("placeholder");
var inputvalue = this.val(); // you need to collect this anyways
if (text === inputvalue) inputvalue = "";
// $.ajax(... // do your ajax thing here
});