相当于 HTML 占位符的 Jquery答案

【问题标题】：Jquery equivalent of HTML placeholder相当于 HTML 占位符的 Jquery
【发布时间】：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(...);当您聚焦任何包含占位符属性的字段时交换文本。这将显着减少您在此处的代码量。

标签： jquery forms validation submit placeholder

【解决方案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 两次，也只会返回第一个。