Jquery 改变<；输入>；调整大小时将值设置为图标

我在谷歌上做过一些搜索，但似乎大多数人都试图通过按钮而不是输入来实现这一点，在我看来，这就像是不同的故事

当用户将我的网页调整为小于640px的宽度时，我希望将输入元素的值属性更改为DOM中表示的放大镜图标，如下所示：

<i class="fa fa-search"></i>

我该怎么做？到目前为止，我的代码如下：

$(window).resize(function() {
    ($(document).width() < 640) ? $("input[id='searchsubmit']").attr("value", "+") : $("input[id='searchsubmit']").attr("value", "Search");
});

$（窗口）。调整大小（函数（）{
（$（document.width（）<640）？$（“输入[id='searchsubmit']”）attr（“值”，“+”）：$（“输入[id='searchsubmit']”）attr（“值”，“搜索”）；
});

---

用上面的图标元素替换“+”将打印整个元素标记本身。非常感谢

这里有几个假设。您使用的是令人敬畏的字体（因此是

fa-fa-search

），当窗口大小调整到640px以下时，您试图将该字形作为值插入

。但是浏览器插入原始html，而不是将其解释为字形

也许更好的解决方案是使用两个提交按钮，并根据屏幕宽度显示/隐藏正确的按钮。类似于以下html的内容：

<input type="submit" value="Search" id="searchsubmit">
<i class="fa fa-search" style="display:none;" id="searchsubmit2"></i>

然后是一些jquery：

$(window).resize(function() {
    if ($(document).width() < 640) {
        $('#searchsubmit').hide();
        $('#searchsubmit2').show();
    }
    else {
        $('#searchsubmit').show();
        $('#searchsubmit2').hide();
    }
});

// a little css for the glyph
$('#searchsubmit2').css('cursor','pointer');

//submit the form when the glyph is clicked
$(document).on('click', '#searchsubmit2', function(e){
    e.preventDefault();
    $('#id-of-form-to-submit').submit();
});

// trigger window resize event on page load so correct submit is displayed
$(window).trigger('resize');

$（窗口）。调整大小（函数（）{
if（$（文档）.width（）<640）{
$（'#searchsubmit'）.hide（）；
$（'#searchsubmit2'）.show（）；
}
否则{
$（'#searchsubmit'）.show（）；
$（'#searchsubmit2'）.hide（）；
}
});
//字形的一点css
$（'searchsubmit2'）.css（'cursor'，'pointer'）；
//单击图示符时提交表单
$（文档）。在（'单击'，'搜索提交2'，函数（e）{
e、 预防默认值（）；
$（“#要提交的表单id”）.submit（）；
});
//页面加载时触发窗口大小调整事件，以便显示正确的提交
$（window.trigger（'resize'）；

由于您使用的是jquery，我相信您可以直接使用$（“selector”）.val（），但将值更改为将使输入字段按字面意思显示“”，您不能将HTML放入输入中。它呈现为您可以看到的HTML格式。您需要替换输入。