0

使用下面的代码，我可以在输入框中显示默认文本消息，默认显示文本框中的值并在单击时将其删除。之后文本向左移动，这就是我需要的。现在，当用户输入搜索词并点击搜索时，它会将他们带到结果页面。搜索框仍显示在结果页面的顶部，但现在我需要左侧显示的文本，而不是文本居中，如果它只是一个搜索词而不是默认搜索占位符。我怎样才能做到这一点？jQuery 也许？

我正在使用 ASP，这是输入框：

<input id="search_input" type="text" autocomplete="off" onkeypress="return 
inputSBox_onkeypress(event, this);" onkeyup="return inputSBox_onkeyup(event,this);"
onfocus="inputSBox_onfocus(this);" onblur="inputSBox_onblur(this);" searchtype="
<%=(int)SearchType%>" value="<%=GetboxValue() %>"class="menu">

CSS：

#search_input {
width: 337px;
height: 36px;
margin-left: 7px;
font-style: italic;
padding-left: 4px;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
outline: medium none;
padding: 0;
margin: -10px 1px 3px 0px;
border: 1px solid #DADADA;
box-shadow:inset 0 0 4px 0 #dfdfdf;
-moz-box-shadow:inset 0 0 4px 0 #dfdfdf;
-wevkit-box-shadow:inset 0 0 4px 0 #dfdfdf;
text-align: center;
font-size: 16px;
color: #9A9A9A;
font-family: Georgia, Arial, sans-serif;
}

#search_imput:focus {
border: 1px solid rgba(81, 203, 238, 1);
color: #797f86;
text-align: left;
width: 327px;
padding-left: 10px;
}
4

1 回答 1

1

如果输入值不为空，您可以使用 jQuery 将 text-align 设置为左​​对齐，如下所示：

$(function() {
    if ($("#search_input").val() != "")
        $("#search_input").css("text-align", "left");
});

但是，如果用户清除输入值，则内容仍将左对齐。

更好的解决方案是在有值时使用 jQuery 应用不同的类。您可以利用现有的 JavaScript 函数进行聚焦和模糊。

于 2013-04-19T12:59:06.867 回答