jquery-watermark 插件和 HTML5 电子邮件输入类型无法正常工作

Posted 2023-02-22

【中文标题】jquery-watermark 插件和 HTML5 电子邮件输入类型无法正常工作

【英文标题】：jquery-watermark plugin and HTML5 email input type not working correctly

【发布时间】：2011-04-05 23:41:49

【问题描述】：

diveintohtml5 表示可以开始使用电子邮件表单类型。所以我正在我的一种形式上尝试它。我正在使用 jQuery 和一个名为 jquery-watermark 的插件。它使占位符元素跨浏览器工作。该插件在 Firefox 3.6 上仍然有效，但在 Opera 10.61 和 Chrome 6 上不会呈现占位符。

<script type="text/javascript">
  $('form input#comment_email').watermark('email (optional)');
</script>

用于显示水印/占位符。

Rails 3 输出如下：

<input id="comment_email" name="comment[email]" size="30" type="email" /> 

我不确定为什么它不起作用。有什么想法吗？

【参考方案1】：

看起来 jquery-watermark 插件似乎只选择某些输入类型来添加水印。您所要做的就是在 jquery.watermark.js 中调整这一行：

selWatermarkAble = ":text,:password,:search,textarea",

包括新的电子邮件类型：

selWatermarkAble = ":text,:password,:search,:email,textarea",

【讨论】：

当我将其设置为selWatermarkAble=":text,:password,:search,:email,textarea", 时，Opera 停止渲染所有水印。如果我使用selWatermarkAble=":text,:password,:search,email,textarea",，水印在 Opera 中会再次起作用，但不包括电子邮件字段，因为 Opera 是唯一真正验证电子邮件地址的桌面浏览器。其他浏览器虽然呈现电子邮件水印。当我使用selWatermarkAble=":text,:password,:search,:email,textarea", 时，所有浏览器都可以正常工作，但不呈现任何水印的 Opera 除外……这是怎么回事？

我怀疑它需要输入 [type=email]，而不是 :email。

记录了一个问题，在下一版本的水印插件中包含对 HTML5 输入类型的支持 - code.google.com/p/jquery-watermark/issues/detail?id=54

【参考方案2】：

您是指输入中的占位符文本吗？ 有一个替代解决方案：HTML 5 Placeholders，而 Watermark 是不支持占位符的浏览器的一个很好的后备方案。

 $('input[placeholder]').each(function() 
   $(this).watermark($(this).attr('placeholder'));
 )

（注意：我没有测试那个代码！）

（编辑：另见http://diveintohtml5.ep.io/detect.html#input-placeholder）

【讨论】：

你也可以，给定 watermark() 的实现，暂时将类型切换为“文本”，然后再切换回来。