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

说我有一个搜索字段与width: 50%;的HTML。如何根据宽度更改文本字段的占位符？

HTML：

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

CSS：

.search {width: 50%;}

当.search足够宽，让我们说宽度大于200像素，我想占位符文本是 “搜索什么......”。但是当宽度变得太小而不能包含全文时，比方说比200px更窄，我希望占位符文本只是“搜索”。

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

2016-05-31 Joe Morano

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

您可以使用不同的占位符的文本框，并只显示您需要的文本框。

2016-05-31 04:33:30

因此，使用CSS视口根据需要显示和隐藏多个字段？ –

当然，否则你将不得不使用JavaScript来设置占位符，它会更复杂。 –

我可以使用什么js方法？ –

回答