CODEWITHSUNDEEP
javascriptjqueryhtml
Learning
Learning

Reputation: 20001

Input search field doent work properly on mobile version of responsive site

I am working on a responsive website and i have use following inline script on search input field so that it show search by default and when on click on the fields it will clear the text so that user can enter new text.

This works fine on desktop version but on mobile version i have to click two time so to set the focus on search field.

If i click once and try to enter it sets focus on address bar.

I am sure script is breaking it on mobile devices.

Please advice if i can fix it or use jquery script to make it work properly

<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>

UPDATE

Rendered HTML code

<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>

UPDATE:

On further troubleshoot i notice that same code works on the jsfiddle but breaks when used on asp.net website.

example

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

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

Upvotes: 2

Views: 737

Answers (1)

roo2
roo2

Reputation: 6071

why not use placeholder attribute? This sidesteps the issue of possibly buggy inline scripts.

remove: text="search", onblur and onfocus events

<asp:TextBox  placeholder="search"/>

Upvotes: 2

Related Questions