By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
448,674 Members | 1,383 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 448,674 IT Pros & Developers. It's quick & easy.

adding onkeyup to input field

P: n/a
Lee
I have this function that doesn't work. I pass it the td element and
an id, and it makes an input field inside the td. That part workds.
What doesn't work is that I want to add an "onkeyup" on the input
field. Any help? Please??? I don't get any error on my javascript
console in firefox, and I am not seeing any errors in IE.

// makes an input field that submits itself using setCalendarValue()
when it's blurred (it will be blurred if [enter] is pressed)
function makeCalendarInputField(el,hoursId,which){
var id=el.id;

// if this input field is already active, then don't let it be
activated again
if(thisCalendarInputField==id){
return false;
}
else{
thisCalendarInputField=id;
}
var value = el.innerHTML;
// remember the original value just in case
originalValue=value;
el.innerHTML='';
var inputField = "<input type='text' value='" + value + "'
name='inputField' id='inputField' "
+ " onBlur='setCalendarValue(this,\"" + id + "\");'
class='calendarInputField' />"
+ "<input type='hidden' name='" + whichField + "' id='" +
whichField + "' value='" + which + "' />"
+ "<input type='hidden' name='" + hoursIdField + "' id='" +
hoursIdField + "' value='" + hoursId + "' />"
+ "";
// change the innerHTML of this td into this input field
el.innerHTML = inputField;
document.getElementById('inputField').focus();

el.onKeyUp="alert('hi')";

return;
}

Oct 20 '06 #1
Share this Question
Share on Google+
13 Replies


P: n/a
Lee wrote:
I have this function that doesn't work. I pass it the td element and
an id, and it makes an input field inside the td. That part workds.
What doesn't work is that I want to add an "onkeyup" on the input
field. Any help? Please??? I don't get any error on my javascript
console in firefox, and I am not seeing any errors in IE.

// makes an input field that submits itself using setCalendarValue()
when it's blurred (it will be blurred if [enter] is pressed)
function makeCalendarInputField(el,hoursId,which){
var id=el.id;

// if this input field is already active, then don't let it be
activated again
Do not allow posted code to auto-wrap, it nearly always introduces more
errors. Manually wrap code at about 70 characters and use 2 spaces for
indents, not tabs.

if(thisCalendarInputField==id){
I guess the value of - thisCalendarInputField - is set elsewhere.
return false;
}
else{
There is no need for an else after a conditional return.
thisCalendarInputField=id;
}
var value = el.innerHTML;
// remember the original value just in case
originalValue=value;
el.innerHTML='';
var inputField = "<input type='text' value='" + value + "'
name='inputField' id='inputField' "
+ " onBlur='setCalendarValue(this,\"" + id + "\");'
class='calendarInputField' />"
The use of mixed-case attribute names in the source markup is a bad
habit, use all lower case (even though HTML doesn't care about case).

Your tag syntax indicates XHTML, but your attribute names appear to
require HTML. The use if innerHTML also infers the use of HTML (though
there is no standard to indicate whether that is a reasonable inference
or not).

Use HTML 4.01, there are no practical benefits to using XHTML on the
web.
+ "<input type='hidden' name='" + whichField + "' id='" +
whichField + "' value='" + which + "' />"
+ "<input type='hidden' name='" + hoursIdField + "' id='" +
hoursIdField + "' value='" + hoursId + "' />"
+ "";
// change the innerHTML of this td into this input field
el.innerHTML = inputField;
document.getElementById('inputField').focus();

el.onKeyUp="alert('hi')";
Javascript is case sensitive:

el.onkeyup = "alert('hi')";

The use of all lower case attribute names (and tag names too) is a good
habit to get into, especially if you really do intend to use XHTML.
--
Rob

Oct 20 '06 #2

P: n/a
Lee
Do not allow posted code to auto-wrap, it nearly always introduces more
errors. Manually wrap code at about 70 characters and use 2 spaces for
indents, not tabs.
ok I hope I got it not wrapping, because I really do appreciate the
help. I've changed things as I've understood them (I really don't
understand XHTML/HTML, so I hope it's besides the point). After I
changed the function, it still works as always.

I realized I didn't use the correct element for "onkeyup," but it's
still not working. Still no javascript errors. Any further help is
really appreciated. Thanks on everything so far!

// makes an input field that submits itself using
// setCalendarValue() when it's blurred (it will be blurred if [enter]
is pressed)
function makeCalendarInputField(el,hoursId,which){
var id=el.id;

// if this input field is already active,
// then don't let it be activated again
if(thisCalendarInputField==id){
return false;
}
thisCalendarInputField=id;
var value = el.innerHTML;
// remember the original value just in case
originalValue=value;
el.innerHTML='';
var inputField =
"<input type='text' value='" + value
+ "' name='inputField' id='inputField' "
+ " onblur='setCalendarValue(this,\"" + id
+ "\");' class='calendarInputField' />"
+ "<input type='hidden' name='" + whichField
+ "' id='" + whichField + "' value='" + which + "' />"
+ "<input type='hidden' name='" + hoursIdField + "' id='"
+ hoursIdField + "' value='" + hoursId + "' />"
+ "";
// change the innerHTML of this td into this input field
el.innerHTML = inputField;

var inputEl=document.getElementById('inputField');
inputEl.focus();

inputEl.onkeyup = "alert('hi')";

return;
}

Oct 20 '06 #3

P: n/a
Lee
By the way, I am going to use a separate library that adds onkeyup in
this fashion, and I'm just using alert to test things out in the
meantime. The library works perfectly elsewhere on an input field that
is already defined when the page loads.

Oct 20 '06 #4

P: n/a
ASM
Lee a écrit :
I have this function that doesn't work. I pass it the td element and
an id, and it makes an input field inside the td. That part workds.
What doesn't work is that I want to add an "onkeyup" on the input
field. Any help? Please??? I don't get any error on my javascript
console in firefox, and I am not seeing any errors in IE.
I do not understand,
you can add a onblur :
+ " onBlur='setCalendarValue(this
and can't add a onkeyup ?

Why ?
In your function, from where comes 'thisCalendarInputField' ?

It certainly would have been better to use createElement + appendChild
instead to use innerHTML ...

--
ASM
Oct 20 '06 #5

P: n/a
ASM
Lee a écrit :
I realized I didn't use the correct element for "onkeyup," but it's
still not working. Still no javascript errors. Any further help is
really appreciated. Thanks on everything so far!
....
function makeCalendarInputField(el,hoursId,which){
var id=el.id;

// if this input field is already active,
// then don't let it be activated again
from where comes this 'thisCalendarInputField' ?
what is it ?

if(!thisCalendarInputField.disabled)
{
thisCalendarInputField.disabled=true;
return;
}
if(thisCalendarInputField==id){
return false;
}
thisCalendarInputField=id;
var value = el.innerHTML;
// remember the original value just in case
originalValue=value;
// variante :
while(el.firstChild) el.removeChild(el.firstChild);
var field = document.createElement('input');
field.name = 'inputField';
field.id = 'inputField';
field.onblur = function() { setCalendarValue(this,'id'); }
el.appendChild(field);
field = document.createElement('input');
field.name = whichField; // don't know from where 'whichField' comes
field.id = whichField;
field.value = which;
field.setAttribute = ('type', 'hidden');
el.appendChild(field);
field = document.createElement('input');
field.type = 'hidden';
field.name = hoursIdField;
field.id = hoursIdField;
field.value = hoursId;
el.appendChild(field);
var inputEl=document.getElementById('inputField');
inputEl.focus();
inputEl.onkeyup = function() { alert('hi'); };
return;
}
Oct 20 '06 #6

P: n/a
Lee
Thanks, I think it will take me a little while to understand the child
functions and everything, but it looks like it might work.

On Oct 20, 10:24 am, ASM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>
wrote:
Lee a écrit :
I realized I didn't use the correct element for "onkeyup," but it's
still not working. Still no javascript errors. Any further help is
really appreciated. Thanks on everything so far!
...
function makeCalendarInputField(el,hoursId,which){
var id=el.id;
// if this input field is already active,
// then don't let it be activated againfrom where comes this 'thisCalendarInputField' ?
what is it ?

if(!thisCalendarInputField.disabled)
{
thisCalendarInputField.disabled=true;
return;
}
if(thisCalendarInputField==id){
return false;
}
thisCalendarInputField=id;
var value = el.innerHTML;
// remember the original value just in case
originalValue=value;// variante :
while(el.firstChild) el.removeChild(el.firstChild);
var field = document.createElement('input');
field.name = 'inputField';
field.id = 'inputField';
field.onblur = function() { setCalendarValue(this,'id'); }
el.appendChild(field);
field = document.createElement('input');
field.name = whichField; // don't know from where 'whichField' comes
field.id = whichField;
field.value = which;
field.setAttribute = ('type', 'hidden');
el.appendChild(field);
field = document.createElement('input');
field.type = 'hidden';
field.name = hoursIdField;
field.id = hoursIdField;
field.value = hoursId;
el.appendChild(field);
var inputEl=document.getElementById('inputField');
inputEl.focus(); inputEl.onkeyup = function() { alert('hi'); };
return;
}
Oct 21 '06 #7

P: n/a
ASM
Lee a écrit :
Thanks, I think it will take me a little while to understand the child
functions and everything, but it looks like it might work.
the important corrections where :
>field.onblur = function() { setCalendarValue(this,'id'); }
and
>inputEl.onkeyup = function() { alert('hi'); };
Oct 21 '06 #8

P: n/a
Lee
Thanks! But I'm so confused.
Why does this work
inputEl.onkeyup = function() { alert('hi'); };
instead of
inputEl.onkeyup="alert('hi')";

Also, I don't know if this will help me in the long run, since I'm
trying to use a library's class in order to do what I need. The syntax
will be: (and it works elsewhere)

var input=value;
var options2 = {
script:"employeeSuggestion.php?",
varname:"input",
minchars:1
};
// add autosuggest
var inputFieldAs = new AutoSuggest(inputEl.id, options2);

ASM wrote:
Lee a écrit :
Thanks, I think it will take me a little while to understand the child
functions and everything, but it looks like it might work.

the important corrections where :
field.onblur = function() { setCalendarValue(this,'id'); }
and
inputEl.onkeyup = function() { alert('hi'); };
Oct 21 '06 #9

P: n/a
Lee
Actually in the object itself it's using that function technique... I
bet that the real problem arises because I am puting in the <input>
after the page loads. How do I manually insert it into the DOM? Do
you think this is really my problem?

Oct 21 '06 #10

P: n/a
ASM
Lee a écrit :
Thanks! But I'm so confused.
Why does this work
inputEl.onkeyup = function() { alert('hi'); };
it works because it works :-)
Also, I don't know if this will help me in the long run, since I'm
trying to use a library's class in order to do what I need. The syntax
will be: (and it works elsewhere)

var input=value;
var options2 = {
script:"employeeSuggestion.php?",
varname:"input",
minchars:1
};
that is equal to :

var options2 = new Object();
options2.script = 'employeeSuggestion.php?';
options2['varname'] = 'input';
options2.minchars = 1;

options2['varname'] is same as options2.varname

see :
http://www.javascriptkit.com/javatutors/oopjs.shtml
// add autosuggest
var inputFieldAs = new AutoSuggest(inputEl.id, options2);
I suppose you can try :
inputEl.onkeyup = function() {new AutoSuggest(this.id, options2);}

--
ASM
Oct 21 '06 #11

P: n/a
Lee
it works! Thanks!

Oct 22 '06 #12

P: n/a
ASM
Lee a écrit :
it works! Thanks!
Splendid ! Wonderful ! Marvelous !

I hate to work with libraries.

--
ASM
Oct 23 '06 #13

P: n/a
Lee wrote:
Thanks! But I'm so confused.
Please don't top-post here.
Why does this work
inputEl.onkeyup = function() { alert('hi'); };
Here you use standard javascript to assign a reference to an anonymous
function object to a property of a DOM object. The DOM object is a
host object, and therefore can behave anyway it wants. However,
browser developers have universally decided that when functions are
attached this way, they will be called as a method of the DOM object.

It's very convenient, but it doesn't work with all host-provided
objects (e.g. XMLHttpRequest)
instead of
inputEl.onkeyup="alert('hi')";
This follows the syntax for adding script within HTML, where the value
of the onkeyup attribute is passed to the script engine as-is:

<input ... onkeyup="alert('hi');" ...>

Which effectively gives the same result as your first effort above.

It may seem inconsistent that in one case you assign a reference to a
function object, in the other you supply some script which is used to
create a function object, but it is very useful to have two methods to
achieve the same result.

e.g. you can easily attach functions defined elsewhere:

function foo (){...}

inputEl.onkeyup = foo;
--
Rob

Oct 23 '06 #14

This discussion thread is closed

Replies have been disabled for this discussion.