小编典典

Internet Explorer 的输入占位符

all

HTML5 引入了元素的placeholder属性input,它允许显示灰色的默认文本。

遗憾的是,包括 IE 9 在内的 Internet Explorer 不支持它。

那里已经有一些占位符模拟器脚本。它们通常通过将默认文本放入输入字段,将其设置为灰色并在您关注输入字段后再次将其删除来工作。

这种方法的缺点是占位符文本位于输入字段中。因此:

  1. 脚本无法轻松检查输入字段是否为空
  2. 服务器端处理必须检查默认值,以便不将占位符插入数据库。

我想要一个解决方案,其中占位符文本不在输入本身中。


阅读 116

收藏
2022-08-08

共1个答案

小编典典

在查看HTML5 Cross Browser
Polyfills
的“Web 表单:输入占位符”部分时,我看到的是jQuery-
html5-placeholder

我用 IE9
尝试了这个演示,它看起来像是<input>用一个
span 包裹了你,并用占位符文本覆盖了一个标签。

<label>Text:
  <span style="position: relative;">
    <input id="placeholder1314588474481" name="text" maxLength="6" type="text" placeholder="Hi Mom">
    <label style="font: 0.75em/normal sans-serif; left: 5px; top: 3px; width: 147px; height: 15px; color: rgb(186, 186, 186); position: absolute; overflow-x: hidden; font-size-adjust: none; font-stretch: normal;" for="placeholder1314588474481">Hi Mom</label>
  </span>
</label>

那里还有其他垫片,但我没有全部看。其中之一Placeholders.js将自己宣传为“没有依赖项(因此不需要包含
jQuery,与大多数占位符 polyfill 脚本不同)。”

编辑: 对于那些对“如何”和“什么”更感兴趣的人,如何创建一个高级 HTML5 占位符
polyfill
,它介绍了创建执行此操作的 jQuery 插件的过程。

2022-08-08