如何用 JS 设置占位符

Posted 2023-03-05

【中文标题】如何用 JS 设置占位符

【英文标题】：How to set placeholder with JS

【发布时间】：2012-03-10 13:33:18

【问题描述】：

请看一下这个小提琴：

http://jsfiddle.net/KA85s/3/

JQ-UI 将第一个选项设置为默认值。我不希望它发生：相反，我想设置 html5 占位符。

如何为这些 JS 生成的输入设置 HTML 5 占位符（而不是第一个可用的 <option>）？

【问题讨论】：

请在您的问题中包含相关代码。

@JamesMontagne 我放置了 JSfiddle 链接。代码很大。没有活生生的例子，没有人会读到这个问题

我并不是说您应该删除 jsfiddle，但在问题中包含 relevant 代码通常很有用。如果 jsfiddle 不复存在，这个问题应该对其他人仍然有用。

【参考方案1】：

用途：

input.attr("placeholder", value);

更新了 jsfiddle：

http://jsfiddle.net/Meligy/KA85s/5/

在示例中，我刚刚替换了您的 val() 调用，显然，您可以从函数中完全删除该部分，并使用您想要的任何文本单独添加它。

【讨论】：

你改变了整个功能。但是如何为 #qsubject 和 #qsubject2 设置不同的占位符？

【参考方案2】：

@Mohamed Meligy 提供了相同的解决方案

http://jsfiddle.net/KA85s/8/

虽然我用了别的东西..

当你的 input 元素使用 jQuery 创建并赋予它一个 placholder 属性时，它是这样工作的：D

** 已更新 **

http://jsfiddle.net/KA85s/19/

添加了自定义默认值：D

【参考方案3】：

这将满足您的所有需求，而不会出现我在 ie7、8、9 中测试过的跨浏览器兼容性问题，运行完美。

<input type="text" value="Search" onfocus="if (this.value == 'Search') this.value = '';" onblur="if (this.value == '') this.value = 'Search';">

祝你好运！

【讨论】：

改变颜色也只是一个小改进：onfocus="if (this.value == 'Type your email') this.value = ''; this.style.color='#333 '" onblur="if (this.value == '') this.value = '键入您的电子邮件'; this.style.color='#BBB'"

@Aamir Shahzad：谢谢！你用这个跨浏览器技巧解决了我的问题！谢谢！