Jump to content

Bluring an asp:TextBox

ZeroShade

By ZeroShade
in .NET

Recommended Posts

ZeroShade Member

ZeroShade

Posted
Posted

I'm having the most difficult time trying to blur this single textbox... I've done it before... and decided to take it off... but I now realize its better to have it blurred. Its just your ordinary asp:TextBox that has an asp:button with it. Can anybody help?

Link to comment
Share on other sites
ZeroShade Member

ZeroShade

Posted
  • Author
Posted

Basically I have a textbox on the masterpage and it has focus set to it by default. so if somebody just pushes the enter button it will activate the button associated with that textbox. Can I use the onblur event to blur the textbox?

Link to comment
Share on other sites
jesh Devoted Member

jesh

Posted
Posted

I believe any solution you come up with is probably going to be javascript. If your TextBox had an ID of "myTextBox", then you could add this to the bottom of your page:

<script type="text/javascript">document.getElementById("myTextBox").blur();</script></body></html>

Otherwise, you could check out this Google search for more solutions:http://www.google.com/search?q=disable+enter+key+submit

Link to comment
Share on other sites
jesh Devoted Member

jesh

Posted
Posted

It doesn't work? Or it won't work?Did you try clicking that link for the Google search? The first 5 results offer you different solutions to your problem.

Link to comment
Share on other sites
ZeroShade Member

ZeroShade

Posted
  • Author
Posted

It doesn't work... and I did click on the link even after searching everything there before... I just can't seem to lose the focus. Heres my code:

<form id="MainForm" runat="server">			   <img src="img/banner_multiplied_1.jpg" alt="" />				<div id="login">				<asp:Label ID="WelcomeLabel" runat="server" />				<asp:LoginName ID="LoginName" ForeColor="#CA1723" runat="server" /> | 				<asp:LoginStatus ID="LoginStatus" runat="server" Font-Bold="True" />				<asp:Label ID="SeparatorLabel" runat="Server" Text=" | " /> 				<asp:Label ID="EditProfileLabel" runat="server" />												<asp:Label ID="SeparatorLabel2" runat="server" Text=" | " />					<a href="Admin.aspx">				<asp:Label ID="AdminsPageLabel" runat="server" Text="Administration Home Page" /></a> 				</div>				<div id="search">				Search 				<asp:TextBox ID="SearchTextBox" CssClass="SearchText" runat="server"></asp:TextBox>				<asp:Button ID="SearchButton" CssClass="SearchButton" runat="server" Text="Go" OnClick="SearchButton_Click" CausesValidation="False" />

Link to comment
Share on other sites
jesh Devoted Member

jesh

Posted
Posted

Basically, you'll need your rendered code to look something like this:

<html><head><script>function disableEnter(e){    e = (e) ? e : window.event;    var code = (e.which) ? e.which : e.keyCode;    if(code == 13) // ENTER    {        return false;    }    else    {        return true;    }}</script></head><body><form><input type="text" id="SearchTextBox" onkeydown="return disableEnter(event);" /><input type="submit" /></form></body></html>

To get the asp:TextBox to have an onkeydown event handler, you can add an attribute in the code behind:

SearchTextBox.Attributes.Add("onkeydown", "return disableEnter(event);");

Link to comment
Share on other sites
ZeroShade Member

ZeroShade

Posted
  • Author
Posted

Sorry... I should of also mentioned that there is code behind the aspx page so that the button can do the "search" in that site. Therefore... I may be wrong but... I can't use the inputs. And I can't just type in onkeydown as an attribute for the textbox. Am I completely wrong?

Link to comment
Share on other sites
aspnetguy Sacred Member

aspnetguy

Posted
Posted

you could also do this although it is not as nice

<asp:TextBox ID="SearchTextBox" CssClass="SearchText" runat="server"></asp:TextBox><script type="text/javascript">function disableEnter(e){e = (e) ? e : window.event;var code = (e.which) ? e.which : e.keyCode;if(code == 13) // ENTER{return false;}else{return true;}}document.getElementById("SearchTextBox").onkeydown = disableEnter;</script>

Link to comment
Share on other sites
ZeroShade Member

ZeroShade

Posted
  • Author
Posted

I know you both probably think I'm annoying or just dumb... but the code jesh has isn't solving the problem. I added the attribute in the codebehind... and the javascript in the head of the aspx page so that it'll read the "Enter" button. I also tried your way aspnetguy... and it will actually break when it hits the document.getElementById line. It says the object is null (oh how I hate that errors... null objects just give me headaches especially with repeaters). Is there anything else I can try... maybe something with the OnTextChange?

Link to comment
Share on other sites
jesh Devoted Member

jesh

Posted
Posted

Can you post the code that the browser sees after the .NET engine parses it? That is to say, can you view the source of the page that is rendered and post that code here? It'll make it easier for us to test it.Or, if you have this page online, can you post the URL?

Link to comment
Share on other sites
ZeroShade Member

ZeroShade

Posted
  • Author
Posted

I have an older version of the site online... it has the same problem... www.northoftoronto.netBecause the search is on the masterpage it can be accessed from any page. Please do not register on the site though... as their is a newer (much better) one going up at a later date so any registering won't make a difference. If you still need me to post the page here... let me know... thanks!

Link to comment
Share on other sites
jesh Devoted Member

jesh

Posted
Posted

It looks like this is only happening in IE which reminds me that IE has a "feature" that will automatically submit the form when a user hits ENTER - even if the form doesn't have focus - if there is only one text input in it.So, you might try aspnetguy's suggestion and disable the ENTER key for the entire document. Or you might try what I did in one of my pages which was something like this:

<asp:TextBox id="SearchTextBox" runat="server" /><input type="text" id="WeAllLoveIE" style="visibility: hidden; display: none;" /><asp:Button ID="SearchButton" CssClass="SearchButton" runat="server" Text="Go" OnClick="SearchButton_Click" CausesValidation="False" />

Link to comment
Share on other sites
jesh Devoted Member

jesh

Posted
Posted
@jeshDid that bug get fixed in IE7? I can't wait to say good bye to atleast IE6 (down to 50%, only 45% more to go *sigh*).
You know, in trying to come up with a response to your question, I can't seem to be able to make a test case that does what ZeroShade is experiencing using HTML alone.In looking through some posts in other forums, I may be mistaken about what adding that hidden text field actually does. According to http://aspnetresources.com/blog/a_misfiring_postback.aspx:
The expected outcome is for the button Click event to fire server-side. Enter something in the textbox and hit Enter. The page refreshes, but nothing happens because Click never fired. It’s awfully confusing to users.I saw an explanation for this phenomenon once, but I don’t remember it. I do remember a workaround, though:
<asp:TextBox id="Name" runat="server" /><br /><asp:Button id="Submit" runat="server" Text="Submit" /><input type="text" style="display: none;" />

Just add an invisible input element as shown above.

So (@ZeroShade), I ran some more tests and it looks like the way I got around it was to NOT use a submit button. Rather than:
<asp:Button ID="SearchButton" OnClick="SearchButton_Click" runat="server"...

I used a Linkbutton:

<asp:LinkButton ID="SearchButton" OnClick="SearchButton_Click" runat="server" ...

And then used CSS to style the hyperlink to look like a button. That made it so IE didn't submit the page when someone hits ENTER even when there is no focus on the input or the submit button.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...