Detect a specific keypress

[bissatch]

Hi,

I have a text box where the user enters their employee email address.
What I want to occur is when the @ sign is pressed it will
automatically add the rest (ie. mycompany.com)

I know the code required to alter the value of a text box but I dont
know the event trigger or code to detect the keypress.

Any ideas?

Cheers

Burnsy

 

[Evertjan.]

wrote on 07 nov 2005 in comp.lang.javascript:

I have a text box where the user enters their employee email address.
What I want to occur is when the @ sign is pressed it will
automatically add the rest (ie. mycompany.com)

I know the code required to alter the value of a text box but I dont
know the event trigger or code to detect the keypress.

don't use keypress, but keyup:

<input onkeyup='var x=this.value;
if(x.substr(x.length-1,1)=="@")
this.value=x+"mycomp.com"'>

 

[bissatch]

Thank you, works a treat.

Now, my next idea ...

Is it possible to highlight specific characters in a text box? For
example, if I have the value '(e-mail address removed)', could I highlight
from position 7 to the end (value.length) resulting in the string
'mycomp.com' being selected?

Cheers

Burnsy

 

[slick]

You can in a textarea, through various browser-dependent methods. I
don't think you can in a normal type="Text" input though.

Here is some code I wrote as part of an editor that will handle setting
the selected text in a textarea.


function _mozSetSelection(txtArea, start, end){
txtArea.selectionStart = start;
txtArea.selectionEnd = end;
}

function _ieSetSelection(txtArea, start, end){
var txtRange = document.selection.createRange();
if (txtRange){
//Put the cursor at the very start of the text area.
if (txtRange.moveToElementText){
//The IE way.
txtRange.moveToElementText(txtArea);
txtRange.setEndPoint('EndToStart', txtRange);
}
else {
//The Opera way.
txtRange.moveStart('character', -txtArea.value.length);
txtRange.moveEnd('character', -txtArea.value.length);
}
txtRange.moveStart('character', start);
txtRange.moveEnd('character', end-start);
txtRange.select();
}
}

function setSelection(txtArea, start, end){
(navigator.userAgent.indexOf('Gecko') ==
-1)?_ieSetSelection(txtArea, start, end):_mozSetSelection(txtArea,
start, end);
}



You would use it like this:
setSelection(textareaBox, 7, textareaBox.value.length);

 

[bissatch]

Ok, havent yet tried it in other browsers but having trouble with IE.

I have simplified it down to the following:

function _ieSetSelection(oTextbox, start, end){

var oRange = document.selection.createRange();

if (oRange) {
//Put the cursor at the very start of the text area.
if (oRange.moveToElementText){
//The IE way.
oRange.moveToElementText(oTextbox);
oRange.setEndPoint('EndToStart', oRange);
}
txtRange.moveStart('character', start);
txtRange.moveEnd('character', end-start);
txtRange.select();
}

}

The HTML element I am using is:

<input name="email" type="text" value="1234567890"
onmouseover="_ieSetSelection (this, 3, 5);">

What I am trying to make happen initially is when the cursor rolls over
the textbox, using the provided code, it will select the text. Without
having a good enough understanding of the textRange object (MS site not
too informative on the subject), I dont know whats wrong.

Burnsy

 

[bissatch]

Sorry, changed the names and forgot others. Still not working though:


function _ieSetSelection(oTextbox, start, end) {

var oRange = document.selection.createRange();

if (oRange) {
//Put the cursor at the very start of the text area.
if (oRange.moveToElementText){
//The IE way.
oRange.moveToElementText(oTextbox);
oRange.setEndPoint('EndToStart', oRange);
}
oRange.moveStart('character', start);
oRange.moveEnd('character', end-start);
oRange.select();
}
}

 

[Julian Turner]

Sorry, changed the names and forgot others. Still not working though:


function _ieSetSelection(oTextbox, start, end) {

var oRange = document.selection.createRange();

if (oRange) {
//Put the cursor at the very start of the text area.
if (oRange.moveToElementText){
//The IE way.
oRange.moveToElementText(oTextbox);
oRange.setEndPoint('EndToStart', oRange);
}
oRange.moveStart('character', start);
oRange.moveEnd('character', end-start);
oRange.select();
}
}

Hi. It works fine for me when I test it. You may have an error or
wrong assumption somewhere else in your script.

Julian

 

[bissatch]

It works fine for me when I test it.

Is it designed to work for a <textarea> or an <input... ? I got it
working on a <textarea> but not an input.

 

[bissatch]

I don't think you can in a normal type="Text" input though. .

Sorry, my mistake. Not reading posts through enough