0

jquery で正常に動作するプレースホルダー関数を作成しましたが、フィールドが空の場合、実際にはプレースホルダーの値が含まれています。関数の外で解決しました。送信時に sendForm() 関数で確認します。しかし、すべてのケースで機能するように、プレースホルダー関数内で解決したいと考えています。コードは次のとおりです。

jquery プレースホルダー:

$(":input[data-placeholder]").each(function(index){     

    if ($(this).val() == "")                
    {
        $(this).val($(this).data("placeholder"));           
        $(this).addClass("placeholder");            
    }           
    }).live("focus",function(){
        //check if the field not filled
        if($(this).hasClass("placeholder")) 
        {
            $(this).removeClass("placeholder");
            $(this).val("");
        }
    }).live("blur",function(){      
        if($(this).val()=="")
        {
            $(this).val($(this).data("placeholder"));           
            $(this).addClass("placeholder");                
        }

    });

html:

            <form name="forme" method="post" onsubmit="return sendForm();"> 
                <div id="fields">                   
                    <input type="text" name="userName" id="userName" data-placeholder="שם מלא"/>
                    <input type="text" name="userPhone" id="userPhone" data-placeholder="טלפון"/>
                    <input type="text" name="userMail" id="userMail" data-placeholder='דוא"ל'/>
                     <!--<textarea name="userMail" id="userMail" data-placeholder='דוא"ל'></textarea>-->
                </div>
                <input type="submit" id="submit" value="הרשמה">
            </form>

sendForm():

function sendForm(){

var uname, uphone, umail; 
$("#userName").hasClass("placeholder") ? uname="" : uname=$("#userName").val(); 
$("#userPhone").hasClass("placeholder") ? uphone="" : uphone=$("#userPhone").val(); 
$("#userMail").hasClass("placeholder") ? umail="" : umail=$("#userMail").val(); 

var dataObject = {name: uname, phone: uphone, mail: umail};

if(validate(uname,uphone,umail))
{
4

2 に答える 2

3

jQuery プレースホルダー (プレースホルダーの送信時に追加):

$(document).ready(function(){
    $(':input[data-placeholder]').each(function(index){
        if($(this).val() == ''){
            $(this).val($(this).data('placeholder'));
            $(this).addClass('placeholder');
        }
        $(this).closest('form').submit(function(){
            $(':input[data-placeholder]').each(function(){
                if($(this).hasClass('placeholder')){
                    $(this).removeClass('placeholder');
                    $(this).val('');
                    //console.log($(this));
                }
            });
        });
    }).live('focus', function(){
        //check if the field not filled
        if($(this).hasClass('placeholder')){
            $(this).removeClass('placeholder');
            $(this).val('');
        }
    }).live('blur', function(){
        if($(this).val() == ''){
            $(this).val($(this).data('placeholder'));
            $(this).addClass('placeholder');
        }
    });
});

プレースホルダーの CSS スタイル:

.placeholder{color:#a0a0a0;}

DOM の後の最初のこと.readyは、属性を持つすべての入力タグに対してループを実行することですdata-placeholder。

次に、入力に値がないかどうかを確認し、jQuery.closest()form関数 (メソッド) を使用して最も近いタグを検索します。これは、0 個または 1 個の要素が見つかるまで DOM を上っていきます(jQuery.patents とは異なります)。 () ) .jQuery.closest('form')

そして、あなたは既に書かれたコードを実行し続けます。

于 2012-09-12T22:56:42.997 に答える
0

ループ内onsubmitの各要素のフォームにハンドラを追加するだけです:.each()

var form = $(this).closest('form');
// check if onsubmit handler is not already installed for this form
if (!form.data('placeholder-processed')) {
    form.data('placeholder-processed', true);
    form.on('submit', function() {
        // move your sendForm() logic here
    }
}

.each()ループは、実行時にすべての既存の要素を処理しますが、イベントハンドラ.live()は、.input[data-placeholder].each()

于 2012-09-11T13:06:56.707 に答える