Internet Explorerの入力プレースホルダ
HTML5ではplaceholder要素にinput属性が導入されました。これにより、グレーアウトされたデフォルトのテキストを表示することができます。
悲しいことにIE 9を含むInternet Explorerはそれをサポートしていません。
すでにいくつかのプレースホルダシミュレータスクリプトがあります。それらは通常、default-textを入力フィールドに入れ、それに灰色を与え、そしてあなたが入力フィールドに焦点を合わせるとすぐにそれを再び取り除くことによって働きます。
この方法の欠点は、プレースホルダのテキストが入力フィールドにあることです。したがって：
- スクリプトは入力フィールドが空かどうか簡単に確認できません
- サーバー側の処理では、プレースホルダーをデータベースに挿入しないように、デフォルト値と照合する必要があります。
プレースホルダのテキストが入力自体に含まれていない解決策が欲しいのですが。
HTML5 Cross Browser Polyfills の「Webフォーム：入力プレースホルダー」セクションを見ると、 jQuery-html5-placeholder があります。
IE9で demo を試しましたが、<input>をスパンで囲み、ラベルにプレースホルダーテキストを重ねるように見えます。
<label>Text:
<span style="position: relative;">
<input id="placeholder1314588474481" name="text" maxLength="6" type="text" placeholder="Hi Mom">
<label style="font: 0.75em/normal sans-serif; left: 5px; top: 3px; width: 147px; height: 15px; color: rgb(186, 186, 186); position: absolute; overflow-x: hidden; font-size-adjust: none; font-stretch: normal;" for="placeholder1314588474481">Hi Mom</label>
</span>
</label>
そこに他のシムもありますが、私はそれらすべてを見ませんでした。そのうちの1つ、 Placeholders.js は、「ほとんどのプレースホルダポリフィルスクリプトとは異なり、依存関係がないため、jQueryを含める必要がない」と宣伝しています。
編集： "how" that "what"に興味がある人のために、 どのように高度なHTML5プレースホルダpolyfillを作成するか 歩くこれを行うjQueryプラグインを作成するプロセスを通じて。
また、IE 10では、プレースホルダのテキストがどのようにフォーカスされなくなるかについてのコメントについては、 IE 10でプレースホルダをフォーカスし続ける を参照してください。これはFirefoxおよびChromeとは異なります。この問題に対する解決策があるかどうかわからない。
私の経験の中で最も良いものは https://github.com/mathiasbynens/jquery-placeholder （ html5please.com が推奨しています）です。 http://afarkas.github.com/webshim/demos/index.html また、非常に広範囲にわたるpolyfillsのライブラリの中には良い解決策があります。
JQuery実装を使えば、送信時にデフォルト値を簡単に削除できます。以下はその例です。
$('#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
});
私はあなたがオーバーレイを探していることを知っています、しかしあなたは（今私が上で書いたものを知っている）この経路の容易さを好むかもしれません。もしそうなら、それから私は私自身のプロジェクトのためにこれを書きました、そしてそれは本当にうまく機能します（jQueryを必要とします）そしてあなたのサイト全体のために実装するためにほんの２、３分かかります。最初は灰色のテキスト、フォーカスが合っているときは薄い灰色、タイピング中は黒い文字が表示されます。入力フィールドが空の場合は、プレースホルダテキストも表示されます。
最初にフォームを設定し、入力タグにプレースホルダの属性を含めます。
<input placeholder="enter your email here">
このコードをコピーしてplaceholder.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.css({ color:'lightGrey' }).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
ブラウザがHTML 5のプレースホルダの属性をサポートしていない場合、これがあなたのサイトのすべての入力フィールドにそれを実装することをお勧めする方法です。
var placeholder = 'placeholder' in document.createElement('input');
if (!placeholder) {
$.getScript("../js/placeholder.js", function() {
$(":input").each(function(){ // this will work for all input fields
$(this).placeHolder();
});
});
}
いくつかの提案を試し、IEで問題を確認した後、ここでうまくいくものです。
https://github.com/parndt/jquery-html5-placeholder-shim/
私が気に入ったこと - あなたはただjsファイルを含めるだけです。開始する必要はありません。
簡単な機能をお勧めします。
function bindInOut(element,value)
{
element.focus(function()
{
if(element.val() == value) element.val('');
}).
blur(function()
{
if(element.val() == '') element.val(value);
});
element.blur();
}
そしてそれを使用するには、このようにしてそれを呼び出します。
bindInOut($('#input'),'Here your value :)');
- IE9以降でのみ動作します
次の解決策は、placeholder属性を使って入力テキスト要素にバインドします。 IEに対するプレースホルダーの動作をエミュレートし、変更されていない場合は送信時に入力のvalueフィールドをクリアします。
このスクリプトを追加すると、IEはHTML5プレースホルダをサポートしているように見えます。
$(function() {
//Run this script only for IE
if (navigator.appName === "Microsoft Internet Explorer") {
$("input[type=text]").each(function() {
var p;
// Run this script only for input field with placeholder attribute
if (p = $(this).attr('placeholder')) {
// Input field's value attribute gets the placeholder value.
$(this).val(p);
$(this).css('color', 'gray');
// On selecting the field, if value is the same as placeholder, it should become blank
$(this).focus(function() {
if (p === $(this).val()) {
return $(this).val('');
}
});
// On exiting field, if value is blank, it should be assigned the value of placeholder
$(this).blur(function() {
if ($(this).val() === '') {
return $(this).val(p);
}
});
}
});
$("input[type=password]").each(function() {
var e_id, p;
if (p = $(this).attr('placeholder')) {
e_id = $(this).attr('id');
// change input type so that the text is displayed
document.getElementById(e_id).type = 'text';
$(this).val(p);
$(this).focus(function() {
// change input type so that password is not displayed
document.getElementById(e_id).type = 'password';
if (p === $(this).val()) {
return $(this).val('');
}
});
$(this).blur(function() {
if ($(this).val() === '') {
document.getElementById(e_id).type = 'text';
$(this).val(p);
}
});
}
});
$('form').submit(function() {
//Interrupt submission to blank out input fields with placeholder values
$("input[type=text]").each(function() {
if ($(this).val() === $(this).attr('placeholder')) {
$(this).val('');
}
});
$("input[type=password]").each(function() {
if ($(this).val() === $(this).attr('placeholder')) {
$(this).val('');
}
});
});
}
});
あなたが使用することができます：
var placeholder = 'search here';
$('#search').focus(function(){
if ($.trim($(this).val()) === placeholder){
this.value ='';
}
}).blur(function(){
if ($.trim($(this).val()) === ''){
this.value = placeholder;
}
}).val(placeholder);
私はこの方法を使って非常に簡単な解決策を見つけました：
http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
それはjqueryハックであり、そしてそれは私のプロジェクトに完璧に働きました
このような単純な：
$(function() {
...
var element = $("#selecter")
if(element.val() === element.attr("placeholder"){
element.text("").select().blur();
}
...
});
私はこの問題を解決するためにjqueryプラグインを書きました..それは無料です..
JQueryディレクトリ
私は、カスタムカラーを許可し、フォーカスが当たったときに入力をクリアするという異なる動作を使用する単純なプレースホルダーJQueryスクリプトを思いつきました。 FirefoxとChromeのデフォルトのプレースホルダーに代わるもので、IE 8のサポートを追加します。
// placeholder script IE8, Chrome, Firefox
// usage: <input type="text" placeholder="some str" />
$(function () {
var textColor = '#777777'; //custom color
$('[placeholder]').each(function() {
(this).attr('tooltip', $(this).attr('placeholder')); //buffer
if ($(this).val() === '' || $(this).val() === $(this).attr('placeholder')) {
$(this).css('color', textColor).css('font-style','italic');
$(this).val($(this).attr('placeholder')); //IE8 compatibility
}
$(this).attr('placeholder',''); //disable default behavior
$(this).on('focus', function() {
if ($(this).val() === $(this).attr('tooltip')) {
$(this).val('');
}
});
$(this).on('keydown', function() {
$(this).css('font-style','normal').css('color','#000');
});
$(this).on('blur', function() {
if ($(this).val() === '') {
$(this).val($(this).attr('tooltip')).css('color', textColor).css('font-style','italic');
}
});
});
});
Placeholdr は私が書いた超軽量のドロップインプレースホルダーjQuery polyfillです。 1 KB未満のサイズです。
私はこの図書館があなたの懸念の両方を解決することを確認しました：
Placeholdrの結果としてテキストが入力フィールドに存在する場合に、予期しない戻り値を防ぐために、Placeholdrは jQuery $ .fn.val（）関数 を拡張します。そのため、フィールドの値にアクセスするためにjQuery APIを使用するのであれば、変更する必要はありません。
Placeholdrはフォームの送信を待ち受け、フィールドからプレースホルダのテキストを削除するので、サーバは単に空の値を見ることができます。
繰り返しますが、プレースホルダーに関する私の目標は、プレースホルダーの問題に対する簡単な解決策を提供することです。 Placeholdrのサポートを受けることに興味があることが他にあれば、Githubで私に知らせてください。
プラグインを挿入してieをチェックするにはjjery.placeholder.js
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.placeholder.js"></script>
<script>
// To test the @id toggling on password inputs in browsers that don’t support changing an input’s @type dynamically (e.g. Firefox 3.6 or IE), uncomment this:
// $.fn.hide = function() { return this; }
// Then uncomment the last rule in the <style> element (in the <head>).
$(function() {
// Invoke the plugin
$('input, textarea').placeholder({customClass:'my-placeholder'});
// That’s it, really.
// Now display a message if the browser supports placeholder natively
var html;
if ($.fn.placeholder.input && $.fn.placeholder.textarea) {
html = '<strong>Your current browser natively supports <code>placeholder</code> for <code>input</code> and <code>textarea</code> elements.</strong> The plugin won’t run in this case, since it’s not needed. If you want to test the plugin, use an older browser ;)';
} else if ($.fn.placeholder.input) {
html = '<strong>Your current browser natively supports <code>placeholder</code> for <code>input</code> elements, but not for <code>textarea</code> elements.</strong> The plugin will only do its thang on the <code>textarea</code>s.';
}
if (html) {
$('<p class="note">' + html + '</p>').insertAfter('form');
}
});
</script>
注：このpolyfillの作者は、「想像できるほとんどすべてのブラウザで動作する」と主張していますが、IE11には当てはまらないというコメントによると、 IE11はほとんどの最新ブラウザと同様にネイティブサポートです
Placeholders.js これは私が見た中で最も優れたプレースホルダpolyfillで、軽量で、JQueryには依存せず、他の古いブラウザ（IEだけでなく）をカバーし、そしてhide-on-inputと1回限りのプレースホルダー。
これはIE 8以下のプレースホルダーを作成する純粋なjavascript関数（jqueryは不要）です。これはパスワードに対しても機能します。 HTML5のplaceholder属性を読み込み、フォーム要素の後ろにspan要素を作成し、フォーム要素の背景を透明にします。
/* Function to add placeholders to form elements on IE 8 and below */
function add_placeholders(fm) {
for (var e = 0; e < document.fm.elements.length; e++) {
if (fm.elements[e].placeholder != undefined &&
document.createElement("input").placeholder == undefined) { // IE 8 and below
fm.elements[e].style.background = "transparent";
var el = document.createElement("span");
el.innerHTML = fm.elements[e].placeholder;
el.style.position = "absolute";
el.style.padding = "2px;";
el.style.zIndex = "-1";
el.style.color = "#999999";
fm.elements[e].parentNode.insertBefore(el, fm.elements[e]);
fm.elements[e].onfocus = function() {
this.style.background = "yellow";
}
fm.elements[e].onblur = function() {
if (this.value == "") this.style.background = "transparent";
else this.style.background = "white";
}
}
}
}
add_placeholders(document.getElementById('fm'))<form id="fm">
<input type="text" name="email" placeholder="Email">
<input type="password" name="password" placeholder="Password">
<textarea name="description" placeholder="Description"></textarea>
</form>