Question

我需要在文本框中包含“X”图标以清除文本框值。

输入文字时，我正在添加一个图标，这会增加文本框的宽度，看起来很奇怪。

编辑：<div id="searchArea"> <input type="text" id="search"/> <span class="fa-close" id="clear-search"></span> <span class="fa-search"></span> </div>

$(document).on("keyup", "#search", function(e) {
if ($("#search").val() != "") {
    $("#clear-search").css("display", "block");
} else {
    $("#clear-search").css("display", "none");
}

}）;

建议我如何实现这个目标？

Answer 1

也许：

$(document).on("keyup", "#search", function(e) {
if ($("#search").val() != "") {
    $("#clear-search").css("display", "inline-block");
} else {
    $("#clear-search").css("display", "none");
}
});

或

你可以显示：在浮动或绝对位置阻止和修改CSS。如果可能的话，给我一个小提琴。

Answer 2

以下是我在bootstrap中用于搜索的代码，其中包含使用glyphicon制作的图标：

JS：

$(".input-sm").addClass("searchinput");
$(".input-sm" ).wrap( "<div class='form-group wrapsearchinput'>" );

$(".searchinput").after( "<span id='searchclear' class='searchclear glyphicon glyphicon-remove-circle'></span>" ); 

$(".searchinput").keyup(function () {
    $(this).next().toggle(Boolean($(this).val()));
});
$(".searchclear").toggle(Boolean($(".searchinput").val()));
$(".searchclear").click(function () {
    $('.dataTables_filter input').val('').keyup();
});

CSS：

.searchinput {
    width: 200px;
}
.searchclear {
    position:absolute !important;
    right:5px;
    top:0;
    bottom:0;
    height:14px;
    margin:auto;
}

如何在不改变文本框宽度的情况下在文本框中添加图标

2 个答案: