输入搜索字段在响应式网站的移动版本上无法正常工作
Posted
技术标签:
【中文标题】输入搜索字段在响应式网站的移动版本上无法正常工作【英文标题】:Input search field doent work properly on mobile version of responsive site 【发布时间】:2014-05-11 19:32:52 【问题描述】:我正在开发一个响应式网站,我在搜索输入字段中使用了以下内联脚本,以便默认显示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/
【问题讨论】:
“我确信脚本在移动设备上会破坏它。”然后发布你的脚本。 他们在代码中onfocus="if(this.value=='Search')this.value='';" onblur="if(this.value=='')this.value='Search';"
这是唯一的脚本?
此代码在桌面上运行良好,但在移动设备上中断。
你能给我们看看真正的 HTML 吗?不是asp代码...
【参考方案1】:
为什么不使用placeholder 属性?这回避了可能存在错误的内联脚本的问题。
删除:text="search"
、onblur
和 onfocus
事件
<asp:TextBox placeholder="search"/>
【讨论】:
这并不能解决问题,它仍然会触发并再次写入搜索并在第二次点击时工作。我无法理解这种行为 我通过像<asp:TextBox ID="txtSearch" placeholder="Search" CssClass="txtSearch" runat="server" CausesValidation="True"></asp:TextBox>
987654326@这样的代码来解决问题
谢谢,最初我保留了 Text="Search" 他们的,并且在将代码修改到它上面的工作文件后它没有工作。这样我就不需要脚本了
很高兴听到并感谢您的接受。我已经为未来的人更新了答案以上是关于输入搜索字段在响应式网站的移动版本上无法正常工作的主要内容,如果未能解决你的问题,请参考以下文章