Question

我在Google上做了一些搜索，但似乎大多数人尝试使用按钮，而不是输入，这在我看来就像是不同的故事。

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

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

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

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

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

Answer 1

在这里做几个假设。您正在使用Font Awesome（因此为fa fa-search），并且当窗口调整为640px以下时，您尝试将该字形作为值插入<input type="submit" value="[glyph here]">。但是浏览器插入原始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');

在调整大小时将<input />值更改为图标

1 个答案: