目前 placeholder 实现方案的缺陷

[hotoo]

初步看了代码，placeholder 使用设置 value 的方式来模拟 placeholder 效果，这种方案有以下几种缺陷：

• 影响输入框的值。
• placeholder 的内容可能被当作 value 提交。虽然组件中有在 submit 时处理，例如出现异常，或者无 form 不 submit 的 search 输入框。
• 用户输入的值与 placeholder 内容相同时，会被误作 placeholder 清理掉。
• 无法完美实现常见的 placeholder 效果：输入框获得焦点时 placeholder 继续显示，输入内容后消失。
• 无法支持 type[password] 等类型的输入框。

---

我目前已知更好的方案是使用 label.placeholder[for=input] 覆盖在 input 上。

建议着重考虑这个方案，优点：

• 不影响输入框的值。
• 不影响、不依赖 submit。
• 上面列举的现有方案缺陷均无。

缺点：

• 需要使用相对或绝对定位。
  • 相对定位：浮动清理。之前做过 demo，可以解决。
  • 绝对定位：对于可能移动的输入框，会出现位置问题。

[lifesinger]

赞冒顿的分析，placeholder 的原作者看下，讨论确定并修改之

2013/6/4 闲耘(tm) [email protected]

初步看了代码，placeholder 使用设置 value 的方式来模拟 placeholder 效果，这种方案有以下几种缺陷：

• 影响输入框的值。
• placeholder 的内容可能被当作 value 提交。虽然组件中有在 submit 时处理，例如出现异常，或者无 form 不
  submit 的 search 输入框。
• 用户输入的值与 placeholder 内容相同时，会被误作 placeholder 清理掉。
• 无法完美实现常见的 placeholder 效果：输入框获得焦点时 placeholder 继续显示，输入内容后消失。
• 好像还有一个非常重要的缺陷，但是现在不记得了。

---

我目前已知更好的方案是使用 label.placeholder[for=input] 覆盖在 input 上。

建议着重考虑这个方案，优点：

• 不影响输入框的值。
• 不影响、不依赖 submit。
• 上面列举的现有方案缺陷均无。

缺点：

• 需要使用相对或绝对定位。
  • 相对定位：浮动清理。之前做过 demo，可以解决。
  • 绝对定位：对于可能移动的输入框，会出现位置问题。

Reply to this email directly or view it on GitHubhttps://github.com//issues/4
.

王保平 / 玉伯（射雕）
送人玫瑰手有余香

[dragonzu]

第一条很重要：“不影响输入框的值”。月初网站上线，ie下死活登不上去，最后跟踪发现是password提交给MD5编码的值包含了“密码”两个字，现在只是注掉了对密码input的处理

在IE10下也是有问题的，暂时也是加了try catch来处理

[lianqin7]

其实最早的时候就是用的 模拟dom 的方案，可惜定位问题太难解决，就改成 https://github.com/mathiasbynens/jquery-placeholder 这个了

[dqw]

只是一个功能扩展不应该太多的依赖样式来解决，相对定位绝对定位搞不好还会对其它东西产生影响

前些日子基于jQuery也实现了一个placeholder扩展，我是通过clone一个input并把原来的input隐藏的方法实现的，当clone的input值发生变化的时候同步修改隐藏的input

影响输入框的值。

不会直接修改input的值

placeholder 的内容可能被当作 value 提交。虽然组件中有在 submit 时处理，例如出现异常，或者无 form 不 submit 的 search 输入框。

隐藏的input发生变化后，通过判断才会更新原input的值，所以应该没有此问题

用户输入的值与 placeholder 内容相同时，会被误作 placeholder 清理掉。

通过增加一个标志来判断是input为空时自动添加的值，还是用户手工输入的

无法完美实现常见的 placeholder 效果：输入框获得焦点时 placeholder 继续显示，输入内容后消失。

这个似乎不是必须的，ie上有时也没法追求完美

我不是专业的前端，不知道是不是有没考虑周全的地方，一个简单的demo

[hotoo]

clone input 的方案不用考虑。

1. 将 form 的字段增加几乎一倍
2. 要修改或去除 clone 后的 name 和 id
3. 不说了。。。

[dqw]

@hotoo 性能原因？

[hotoo]

@dqw 不是，为了一个辅助的 placeholder 功能，复制一遍表单的全部表单项，不值当。

[afc163]

用户输入的值与 placeholder 内容相同时，会被误作 placeholder 清理掉。

这个问题是没有的。

[hotoo]

还有一个问题，光标在 focus 事件绑定之前就已经在输入框中获得实际焦点，导致默认的 placeholder 不消失，
无论使用键盘移动光标、选择文字、点击输入框（此时不触发 focus 事件）

应该在事件绑定完成之后设置 placehoder 到 value