jquery - 我可以根据浏览器宽度使用 CSS 或 jQuery 更改占位符文本吗？

Question

在我的 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;
  }
}

Answer 1

尝试

$(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()
});

jsfiddle http://jsfiddle.net/guest271314/vfu3cdwb/4/