在我的 Bootstrap 顶部菜单(Rails 4 应用程序)中,我有一个搜索框,用户可以在其中搜索产品,因此我的占位符文本类似于:
查找产品,例如Macbook Pro...
当浏览器调整到例如手机格式小,文字太长。所以我希望文本只是这样的:
查找产品...
我正在使用 Rails 本地化,所以我更希望能够拥有本地化的文本,而不是将某些内容直接放入 css 文件中。所以也许使用 jQuery 是可能的,尽管我认为这是一个更繁重的解决方案。有什么想法吗?
我的占位符 CSS 如下所示:
@media (max-width: 614px) and (min-width: 1px) {
.top-menu input {
width: 230px;
}
.top-menu input::-webkit-input-placeholder {
color: #6b7279;
}
.top-menu input:-moz-placeholder {
color: #6b7279;
}
.top-menu input:-ms-input-placeholder {
color: #6b7279;
}
}
最佳答案
尝试
$(function () {
$(window).on("resize", function (e) {
var w = e.target.innerWidth;
var input = $("input[class=top-menu]");
return input.css({
"color": "#6b7279",
"width": "230px"
})
.attr("placeholder"
, (w > 1 && w < 614)
? "Find a product..."
: "Find product, e.g. Macbook Pro...")
}).resize()
});
关于jquery - 我可以根据浏览器宽度使用 CSS 或 jQuery 更改占位符文本吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25342557/