Question

我在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))
{

Answer 1

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标记，该标记正在向上运行，直到找到零为止或一个元素jQuery.closest('form') (unlike jQuery.patents() )。

然后，你已经编写了代码继续运行。

Answer 2

只需在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()。

jquery占位符函数：当输入为空时，发送占位符值

2 个答案: