一尘不染

Internet Explorer的输入占位符

javascript

HTML5 placeholderinput元素上引入了属性,该属性允许显示灰色的默认文本。

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

已经有一些占位符模拟器脚本了。它们通常通过将默认文本放入输入字段中,使其为灰色,然后在您聚焦输入字段时再次将其删除来工作。

这种方法的缺点是占位符文本在输入字段中。从而:

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

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


阅读 270

收藏
2020-05-01

共1个答案

一尘不染

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

它看起来像是<input>用跨距包住了标签,并在标签上放置了占位符文本。

<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,宣称自己为“无依赖项(因此与大多数占位符polyfill脚本不同,无需包含jQuery)”。

2020-05-01