如何根据宽度更改文本字段的占位符？答案

【问题标题】：How could I change the placeholder of a text field based on the width?如何根据宽度更改文本字段的占位符？
【发布时间】：2016-09-28 22:36:04
【问题描述】：

假设我有一个带有width: 50%; html 的搜索字段。

html:

<%= text_field_tag :search, , class: "search", placeholder: "Search for anything..." %>

css:

.search {width: 50%;}

当.search 足够宽时，假设宽度超过 200 像素，我希望占位符文本为“搜索任何内容...”。但是当宽度变得太小而无法包含全文时，比方说比 200px 窄，我希望占位符文本只是“搜索”。

我可以使用视口来更改 CSS，但是如何使占位符文本响应？

【问题讨论】：

我认为该选项不可用。您所能做的就是准备 2 个输入，其值为“搜索任何内容...”和“搜索”。根据您的视口隐藏和显示您的输入，并且不要忘记禁用至少其中一个。否则将提交 2 个同名输入。

【解决方案1】：

您可以使用具有不同占位符的不同文本字段并仅显示您需要的那个。

【讨论】：

那么使用 CSS 视口来适当地显示和隐藏多个字段？
可以，否则你得用javascript来设置占位符，会比较复杂。
可以用什么js方法？
这要复杂得多，你必须放置一个监听器来检查大小是否改变，然后如果大小改变你必须设置新的占位符。如果您使用的是 jquery，那么更改占位符将是这样的： $(".search").attr("placeholder", "Search for anything ...").focus().blur();