我在一个响应式网站上工作，我在搜索输入字段上使用了以下内联脚本，以便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网站上使用时会中断。
例子
为什么不使用占位符属性？这回避了可能有错误的嵌入式脚本的问题。
删除：text="search"，onblur和onfocus事件
<asp:TextBox placeholder="search"/>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句