Question

我正在使用自适应网站，我在搜索输入字段中使用了以下内联脚本，以便默认显示search，当点击字段时，它将清除文本，以便用户可以输入新内容文本。

这适用于桌面版，但在移动版上我必须点击两次才能将焦点设置在搜索栏上。

如果我点击一次并尝试输入它，请将焦点设置在地址栏上。

我确信脚本会在移动设备上破坏它。

请告知我是否可以修复它或使用jquery脚本使其正常工作

<div class="search-container">
   <asp:TextBox ID="txtSearch" Text="Search"  CssClass="txtSearch" runat="server" onfocus="if(this.value=='Search')this.value='';" onblur="if(this.value=='')this.value='Search';" CausesValidation="True"></asp:TextBox>           
   <asp:Button ID="btnSearch" CssClass="btn-search" runat="server" Text="Search" onclick="btnSearch_Click" />
</div>

更新

呈现HTML代码

<div class="search-container">

<input type="submit" class="btn-search btn" id="btnSearch" value="Go!" name="ctl00$btnSearch">

<input type="text" onblur="if(this.value=='')this.value='Search';" onfocus="if(this.value=='Search')this.value='';" class="txtSearch" id="txtSearch" value="Search" name="ctl00$txtSearch">

 </div>

更新：

在进一步的故障排除中，我注意到相同的代码在jsfiddle上运行但在asp.net网站上使用时会中断。

示例

http://jsfiddle.net/M5Z9v/2/

http://fiddle.jshell.net/M5Z9v/2/show/

Answer 1

为什么不使用placeholder属性？这避免了可能有缺陷的内联脚本的问题。

删除：text="search"，onblur和onfocus个事件

<asp:TextBox  placeholder="search"/>

输入搜索字段在响应式网站的移动版本上无法正常运行

1 个答案: