18

以下に示すプレースホルダー属性は Firefox で正常に機能しますが、フィールドが空のときに val() が呼び出されると、テキスト内の実際の値ではなくプレースホルダー値が返されます。

JSFiddle - http://jsfiddle.net/Jrfwr/2/

<input id="tlt" type="text" placeholder="Enter Title" />

JSコード

function placeHolderFallBack() {
   if ("placeholder" in document.createElement("input")) {
       return;
   }
   else {
       $('[placeholder]').focus(function () {
           var input = $(this);
           if (input.val() == input.attr('placeholder')) {
               input.val('');
               input.removeClass('placeholder');
           }
       }).blur(function () {
           var input = $(this);
           if (input.val() == '' || input.val() == input.attr('placeholder')) {
               input.addClass('placeholder');
               input.val(input.attr('placeholder'));
           }
       }).blur();
       $('[placeholder]').parents('form').submit(function () {
           $(this).find('[placeholder]').each(function () {
               var input = $(this);
               if (input.val() == input.attr('placeholder')) {
                   input.val('');
               }
           })
       });
   }
}
4

3 に答える 3

15

val() メソッドをオーバーライドすることもできますが、私はそれが好きではありません:D

pVal()仕事をする簡単な関数を書きました

$.fn.pVal = function(){
    var $this = $(this),
        val = $this.eq(0).val();
    if(val == $this.attr('placeholder'))
        return '';
    else
        return val;
}
$(function(){
    alert($('input').val())
    alert($('input').pVal())
});​

http://jsfiddle.net/W7JKt/3/

于 2012-06-26T13:47:43.467 に答える
3

JSFiddle コードでは、BUTTON CLICK イベントでテキストボックスの値を取得します...そして、テキストボックスの現在の値がプレースホルダーと等しいかどうかをチェックするコードは、FORM SUBMIT イベントで実行されます。

だから... 問題は、BUTTON の CLICK イベントが FORM の SUBMIT イベントの前に実行されることです。

このコードは、正しい値を取得する方法の例を示しています

それが役立つことを願っています。

于 2012-06-26T13:55:13.240 に答える
0

HTML 5 と関係があります。こちらの記事をご覧ください。

http://www.cssnewbie.com/cross-browser-support-for-html5-placeholder-text-in-forms/

于 2012-06-26T13:47:50.307 に答える