Question

在我的Bootstrap顶级菜单（Rails 4应用程序）中，我有一个搜索boz，用户可以搜索产品，因此我的占位符文本是这样的：

查找产品，例如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/

Answer 2

你可以这样做。在这种情况下，.my_textarea是附加到textarea html标记的类。

 $('.my_textarea').each(function() {
        $(this).data('placeholder', $(this).attr('placeholder'));
    });

    function changePlaceholder() {
        if( $(window).width() <= 640){
            $('.my_textarea').attr('placeholder','Find product...');
        } else {
            $('.my_textarea').each(function() {
                $(this).attr('placeholder', $(this).data('placeholder'));
            });
        }   
    }

    $(window).resize( changePlaceholder ).trigger('resize');

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

2 个答案: