jquery占位符功能：输入为空时，发送占位符值答案

【问题标题】：jquery placeholder function: When the input is empty, placeholder value is sentjquery占位符功能：输入为空时，发送占位符值
【发布时间】：2012-09-04 10:02:18
【问题描述】：

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

【问题讨论】：

您必须支持哪些浏览器？也许你可以使用placeholder 属性。

标签： jquery

【解决方案1】：

只需在 .each() 循环中的每个元素的表单中添加一个 onsubmit 处理程序即可：

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] 在之后创建的元素 /em> 你已经运行了.each()。

【讨论】：

【解决方案2】：

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 中向上工作，直到找到零个或一个元素@ 987654328@(unlike jQuery.patents() ).

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

【讨论】：