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>

发送表单（）：

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函数（方法）搜索最接近的标签，该函数在 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 回答