Jump to content

Changing Default Input Field Behavior


Costanza
 Share

Recommended Posts

I added an input field to my page, but the default behavior isn't fully what I'd like. There are 2 main issues: 1) It underlines mis-spelled words in red, just like in a text editor. This seems to be my browser's doing but is there a way to disable spell checking in this one field? I'm using this input field for users to enter a personalized name for something so "mis-spellings" will be very common. 2) When I hit the enter key after typing some text, it deletes the text I just typed in. It un-focuses the input field like it should, but I don't understand why the text disappears. Is there a way to make hitting "Enter" simply un-focus the input field and keep the entered text where it is? Thank you for your help!

Link to comment
Share on other sites

1. You may be able to use the spellcheck attribute to control spell-checking, but this may not work in all browsers. 2. When you hit enter, the form is submitted, and you probably don't have an action set so the page was just reloaded (clearing the input values). You can override this behaviour by setting an event handler for the form's submit event, but this is against UI conventions where the enter key is meant to submit the form. Users are meant to press tab to switch between fields.

Link to comment
Share on other sites

For the 2nd question you could use similar code below

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Untitled Document</title></head><body><script type="text/javascript">function keypressed(e){e = e? e : window.event;var Key = e.keyCode? e.keyCode : e.which? e.which : null;if (Key == 13){alert("Enter button Pressed - Press the damn 'Submit Now' button Fool!")if(e.preventDefault)e.preventDefault(); //Prevent form being submittinge.returnValue=false; //Prevent form being submittinge.cancel = true; //Prevent form being submitting};};</script><form><input type="text" onkeypress="keypressed(event)" /><input type="submit" value=" Submit Now" /></form></body></html>

Link to comment
Share on other sites

As for the second part, is there a way to just force the textfield to blur/unfocus when Enter is hit? Because that would accomplish what I need.
dsonesuk pretty much gave you what you need. Just change the function to accept one more parameter:
function keypressed(e, elem)

and pass a reference to the element the key is being pressed on using the this keyword:

<input type='text' onkeypress='keypressed(event, this)' />

Then, inside the function, add a line that calls the blur() method of the element.

Link to comment
Share on other sites

dsonesuk pretty much gave you what you need. Just change the function to accept one more parameter:
function keypressed(e, elem)

and pass a reference to the element the key is being pressed on using the this keyword:

<input type='text' onkeypress='keypressed(event, this)' />

Then, inside the function, add a line that calls the blur() method of the element.

Ah ok, that's exactly what I was looking for. Thank you ShadowMage and dsonesuk! I love this site so much lol. I try to figure it out myself, then I research the issue/tag/function, then if that fails I come here and the problem has always been solved so far :) By the way, how do I mark a topic as "solved'? I tried editing my original post but it doesn't allow me to change the title. Edited by Costanza
Link to comment
Share on other sites

By the way, how do I mark a topic as "solved'? I tried editing my original post but it doesn't allow me to change the title.
http://w3schools.invisionzone.com/index.php?showtopic=40550
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...