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

Assign onkeypress-function to dynamically created input-boxes

P: n/a
Hi.

I have a problem with assigning an onkeypress-function to dynamically
created input-boxes.I want to put the content of an input-field into a
tag-list when the user hits enter. This works fine the first time (when
the input-field is created in a non-dynamical way). The next
input-field is created dynamically by a function that is called when
the user hits enter (the previously generated input-field will be
hidden). Then I'm trying to assign an onkeypress-function to the new
element like this:

document.getElementById('tags_element_' +
document.getElementById('tagcount').value).onkeypr ess = function(event)

But when i press a key in the dynamically created input-field, nothing
happens. Why is this?

Some sample-code below:
----------------------------------------------------------------------------------------------------------------------------------
document.getElementById('tags_element_' +
document.getElementById('tagcount').value).onkeypr ess =
function(event){
modus = 1;
e = event;

// New file input
if ((e.which == 13 || e.which == 1 || modus == 2) || (modus == 2 ||
e.keyCode == 13)){
var new_element = document.createElement( 'input' );
new_element.type = 'text';
new_element.size = '40';

document.getElementById('tagcount').value =
parseInt(document.getElementById('tagcount').value ) + 1;

new_element.id = 'tags_element_' +
document.getElementById('tagcount').value;
var tags = document.getElementById('tagcount').value - 1;
document.getElementById('tags_element_' +
tags).parentNode.insertBefore( new_element,
document.getElementById('tags_element_' + tags) );

// Apply 'update' to element
document.getElementById('tags_element_' +
tags).multi_selector.addElement( new_element );

// Update list
document.getElementById('tags_element_' +
tags).multi_selector.addListRow(
document.getElementById('tags_element_' + tags) );
return false;
}
else{
return true;
}

};
-------------------------------------------------------------------------------------------------------------------
- addListRow creates a new row in the tag-list.
- addElement adds the new element to the multiselector-object that
contains all the input-fields
Thanks in advance!

Vega80

Oct 29 '06 #1
Share this Question
Share on Google+
1 Reply


P: n/a
ASM
vega80 a écrit :
Hi.

I have a problem with assigning an onkeypress-function to dynamically
created input-boxes.I want to put the content of an input-field
input-field = text field ? (<input type="text")
into a tag-list
I don't know what it is :-(
(a select ? an ul+li ? other ? what ?)
when the user hits enter.
where does he hits Enter ?
This works fine the first time (when
the input-field is created in a non-dynamical way). The next
input-field is created dynamically by a function that is called when
the user hits enter (the previously generated input-field will be
hidden). Then I'm trying to assign an onkeypress-function to the new
element like this:
Absolutely illegible !
try to use variables when you call several times same element.
function $(x) { return document.getElementById(x); }

// to initialize first text field :

function init() {
var count = $('tagcount').value;
$('tags_element_'+count).onkeypress = function() {
hitEnter(event);
}
$('tagcount').value++;
}

function hitEnter(e) {
e = e || event;
modus = 1;
if (
(e.which == 13 || e.which == 1 || modus == 2) ||
(modus == 2 || e.keyCode == 13)
)
newField();
}

function newField() {
var count = $('tagcount').value*1;
var field = document.createElement('input');
field.name = field.id = 'tags_element_'+count+'';
field.type = 'text';
field.size = 40;
field.onkeypress = function() { hitEnter(event); }
count--;
var target = $('tags_element_'+count+'');
target.parentNode.insertBefore(field, target);
target.multi_selector.addElement(field);
target.multi_selector.addListRow(target);
$('tagcount').value++;
}
Some sample-code below:
----------------------------------------------------------------------------------------------------------------------------------
document.getElementById('tags_element_' +
document.getElementById('tagcount').value).onkeypr ess =
function(event){
modus = 1;
e = event;

// New file input
if ((e.which == 13 || e.which == 1 || modus == 2) || (modus == 2 ||
e.keyCode == 13)){
var new_element = document.createElement( 'input' );
and where is the onkeypress for the new element ?
not seen ...
-------------------------------------------------------------------------------------------------------------------
- addListRow creates a new row in the tag-list.
- addElement adds the new element to the multiselector-object that
contains all the input-fields
when it is possible to do complicated ...
Oct 30 '06 #2

This discussion thread is closed

Replies have been disabled for this discussion.