相当于 HTML 占位符的 Jquery

Posted 2023-05-09

【中文标题】相当于 HTML 占位符的 Jquery

【英文标题】：Jquery equivalent of HTML placeholder

【发布时间】：2012-12-12 13:29:55

【问题描述】：

在制作等效的 jquery 占位符时，我遇到了表单提交的问题。现在焦点/焦点输出的值发生变化，但我遇到的问题是这些字段不能留空，但表单验证将默认值读取为一个值，因此它允许它。我尝试检查 submit() 和 onclick()。 Onclick 提交按钮并提交表单本身。都没有奏效。如果值是默认值，我需要检查它何时提交。如果是的话，希望能在提交之前使值变为空白。这样，内置错误系统的 drupal 将触发而不是构建我自己的。

占位符文本的当前代码。

if ($.browser.msie) 
    // for name field
    $('#edit-submitted-name').focus(function()
        if ( $('#edit-submitted-name').val() == 'Name...' ) 
            $(this).val('');
            $(this).css('color', '#000');
        
    );
    $('#edit-submitted-name').focusout(function()
        if ( !$('#edit-submitted-name').val() ) 
            $(this).val('Name...');
            $(this).css('color', '#abadb3');
        
    );
    //for email address field
    $('#edit-submitted-email-address').focus(function()
        if ( $('#edit-submitted-email-address').val() == 'Email Address...' ) 
            $(this).val('');
            $(this).css('color', '#000');
        
    );
    $('#edit-submitted-email-address').focusout(function()
        if ( !$('#edit-submitted-email-address').val() ) 
            $(this).val('Email Address...');
            $(this).css('color', '#abadb3');
        
    );
    // for email field
    $('#edit-submitted-email').focus(function()
        if ( $('#edit-submitted-email').val() == 'Email...' ) 
            $(this).val('');
            $(this).css('color', '#000');
        
    );
    $('#edit-submitted-email').focusout(function()
        if ( !$('#edit-submitted-email').val() ) 
            $(this).val('Email...');
            $(this).css('color', '#abadb3');
        
    );

    $('#edit-submitted-name').val('Name...');
    $('#edit-submitted-name').css('color', '#abadb3');
    $('#edit-submitted-email-address').val('Email Address...');
    $('#edit-submitted-email-address').css('color', '#abadb3');
    $('#edit-submitted-email').val('Email...');
    $('#edit-submitted-email').css('color', '#abadb3');

【问题讨论】：

让这段代码更通用可能是个好主意。您已经为特定领域构建了特定的解决方案。很好...但是如果您仍然使用 html5 占位符属性来定义“电子邮件”，然后使用 jQuery 执行类似... $('input[placeholder]').focus(...);当您聚焦任何包含占位符属性的字段时交换文本。这将显着减少您在此处的代码量。

【参考方案1】：

您可以使用 jquery 占位符插件：jquery.placeholder.js

【参考方案2】：

Jquery Watermark 是占位符的好例子：-

http://code.google.com/p/jquery-watermark/

【参考方案3】：

我认为您不需要这样的插件。这似乎可能是矫枉过正。

你是说你做过类似......

$('#formId').submit(function () 
    //check all inputs in the form, if their values match the placeholders then remove the values

    //returning true or false here will either continue form submission or stop it (i think)
);

当您检查元素时，您是否在标签上看到任何事件侦听器？谷歌浏览器的检查器在 CSS 下方的一个元素上有一个部分，它将向您显示事件侦听器。这将帮助您验证是否将任何内容添加为 onSubmit

【讨论】：

这样做的问题是我必须使用自己的错误系统。不过我会试试的

【参考方案4】：

这对我很有用。

$('form.webform-client-form input#edit-submit').click(function()
        if ($('#edit-submitted-name').val() == 'Name...') 
            $('#edit-submitted-name').val('');
            $('form.webform-client-form').submit();
        
        if ($('#edit-submitted-email-address').val() == 'Email Address...') 
            $('#edit-submitted-email-address').val('');
            $('form.webform-client-form').submit();
        
        if ($('#edit-submitted-email').val() == 'Email...') 
            $('#edit-submitted-email').val('');
            $('form.webform-client-form').submit();
        
    );

【讨论】：

$('form.webform-client-form input#edit-submit') 只需为 $('#edit-submit')，除非页面上有 2 个按钮具有相同的 ID。

即使您确实尝试使用同一个 ID 两次，也只会返回第一个。