mudbuggle
asked on
Calling a Javascript function from an input tag
I am attempting to call a function on a text input tag. I have tried everyway I can think of but it never calls the function. If I replace select('single',this.paren tNode) with an alert statement it works just fine. Also the select function works fine when called from any other element. Any ideas?
<input id="txt" type="text" onkeydown="if(event.keyCod e==9){sele ct('single ',this.par entNode)}" >
<input id="txt" type="text" onkeydown="if(event.keyCod
ASKER
Surely, here is the full code. It will only work in IE.
<html>
<head>
<style type="text/css">
table {
width : 1000px;
height : 500px;
}
th {
border : 1px solid;
background : #D6D6D6;
text-align : center;
cursor : pointer;
}
td {
border : 1px solid;
text-align : center;
cursor : pointer;
}
ul {
list-style-type : none;
border : 1px solid;
background : #D6D6D6;
text-decoration : none;
text-align : center;
width : 100px;
position : absolute;
display : none;
z-index : 1;
cursor : pointer;
}
li {
width : 100%;
height : 100%;
}
input {
text-align : center;
padding: 18px;
border : 0px;
width : 96%;
height : 96%;
}
</style>
<script language="javascript">
var previousrow = '';
var previouscol = '';
var previoushead = '';
function select(id,head)
{
alert('aya');
if((previouscol != '') && (previoushead != ''))
{
var pcolumn = document.getElementsByName(previouscol);
for(i=0;i<pcolumn.length;i++)
{
pcolumn[i].style.backgroundColor = pcolumn[i].style.backgroundColor != '#ededed' ? '#EDEDED' : '';
}
if(previouscol == 'single')
{
previoushead.style.backgroundColor = previoushead.style.backgroundColor != '#ededed' ? '#EDEDED' : '';
}
else
{
previoushead.style.backgroundColor = previoushead.style.backgroundColor != '#ededed' ? '#EDEDED' : '#D6D6D6';
}
}
if(id != 'single')
{
if(previouscol != id)
{
var column = document.getElementsByName(id);
for(i=0;i<column.length;i++)
{
column[i].style.backgroundColor = column[i].style.backgroundColor != '#ededed' ? '#EDEDED' : '';
}
head.style.backgroundColor = head.style.backgroundColor != '#ededed' ? '#EDEDED' : '#D6D6D6';
previouscol = id;
previoushead = head;
}
else
{
previouscol = '';
previoushead = '';
}
}
else
{
head.style.backgroundColor = head.style.backgroundColor != '#ededed' ? '#EDEDED' : '';
previouscol = id;
previoushead = head;
}
}
function rclick()
{
if (navigator.appName == 'Microsoft Internet Explorer' && event.button==2)
{
var menu = document.getElementById('rightclick');
menu.style.left = event.clientX + document.body.scrollLeft - 45;
menu.style.top = event.clientY + document.body.scrollTop -5;
menu.style.display = 'block';
}
}
document.onmousedown=rclick
function menuhide()
{
var menu = document.getElementById('rightclick');
menu.style.display = 'none';
}
</script>
</head>
<body oncontextmenu="return false;">
<table>
<tr id="header"><th> </th><th onclick="select('col1',this)">A</th><th onclick="select('col2',this)">B</th><th onclick="select('col3',this)">C</th><th onclick="select('col4',this)">D</th><th onclick="select('col5',this)">E</th></tr>
<tr id="1"><th onclick="select('1',this)">1</th><form method="post"><td id="col1" onclick="select('single',this)"><input id="txt" type="text" onkeydown="if(event.keyCode==9){select('single',this.parentNode)}"></td><td id="col2" onclick="select('single',this)"><input type="text" onkeydown="if(event.keyCode==9){'single',this.parentNode}"></td><td id="col3" onclick="select('single',this)"><input type="text"></td><td id="col4" onclick="select('single',this)"><input type="text"></td><td id="col5" onclick="select('single',this)"><input type="text"></td></form></tr>
<tr id="2"><th onclick="select('2',this)">2</th><td id="col1" onclick="select('single',this)"><input type="text"></td><td id="col2" onclick="select('single',this)"><input type="text"></td><td id="col3" onclick="select('single',this)"><input type="text"></td><td id="col4" onclick="select('single',this)"><input type="text"></td><td id="col5" onclick="select('single',this)"><input type="text"></td></tr>
<tr id="3"><th onclick="select('3',this)">3</th><td id="col1" onclick="select('single',this)"><input type="text"></td><td id="col2" onclick="select('single',this)"><input type="text"></td><td id="col3" onclick="select('single',this)"><input type="text"></td><td id="col4" onclick="select('single',this)"><input type="text"></td><td id="col5" onclick="select('single',this)"><input type="text"></td></tr>
<tr id="4"><th onclick="select('4',this)">4</th><td id="col1" onclick="select('single',this)"><input type="text"></td><td id="col2" onclick="select('single',this)"><input type="text"></td><td id="col3" onclick="select('single',this)"><input type="text"></td><td id="col4" onclick="select('single',this)"><input type="text"></td><td id="col5" onclick="select('single',this)"><input type="text"></td></tr>
<tr id="5"><th onclick="select('5',this)">5</th><td id="col1" onclick="select('single',this)"><input type="text"></td><td id="col2" onclick="select('single',this)"><input type="text"></td><td id="col3" onclick="select('single',this)"><input type="text"></td><td id="col4" onclick="select('single',this)"><input type="text"></td><td id="col5" onclick="select('single',this)"><input type="text"></td></tr>
<tr id="6"><th onclick="select('6',this)">6</th><td id="col1" onclick="select('single',this)"><input type="text"></td><td id="col2" onclick="select('single',this)"><input type="text"></td><td id="col3" onclick="select('single',this)"><input type="text"></td><td id="col4" onclick="select('single',this)"><input type="text"></td><td id="col5" onclick="select('single',this)"><input type="text"></td></tr>
<tr id="7"><th onclick="select('7',this)">7</th><td id="col1" onclick="select('single',this)"><input type="text"></td><td id="col2" onclick="select('single',this)"><input type="text"></td><td id="col3" onclick="select('single',this)"><input type="text"></td><td id="col4" onclick="select('single',this)"><input type="text"></td><td id="col5" onclick="select('single',this)"><input type="text"></td></tr>
<tr id="8"><th onclick="select('8',this)">8</th><td id="col1" onclick="select('single',this)"><input type="text"></td><td id="col2" onclick="select('single',this)"><input type="text"></td><td id="col3" onclick="select('single',this)"><input type="text">/td><td id="col4" onclick="select('single',this)"><input type="text"></td><td id="col5" onclick="select('single',this)"><input type="text"></td></tr>
</table>
<ul id="rightclick" onmouseout="menuhide()" onmouseover="this.parentNode.style.display = 'block';">
<li onmouseover="this.parentNode.style.display = 'block';">copy</li>
<li onmouseover="this.parentNode.style.display = 'block';">paste</li>
<li onmouseover="this.parentNode.style.display = 'block';">save</li>
<li onmouseover="this.parentNode.style.display = 'block';">delete</li>
</ul>
</body>
</html>
Can you explain what it is you are trying to do?
I tried it in Chrome, FireFox, and IE, and in each, if I click on a cell I see the "aye" dialog box, and the cell is changed to an input field, and I can type text...
What is it you are trying to do, and what doesn't work?
I tried it in Chrome, FireFox, and IE, and in each, if I click on a cell I see the "aye" dialog box, and the cell is changed to an input field, and I can type text...
What is it you are trying to do, and what doesn't work?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
And add this to make it work in FF too
//Written by Jason Karl Davis
if(typeof HTMLElement!='undefined'&& !HTMLEleme nt.prototy pe.click)
HTMLElement.prototype.clic k=function (){
var evt = this.ownerDocument.createE vent('Mous eEvents');
evt.initMouseEvent('click' , true, true, this.ownerDocument.default View, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
this.dispatchEvent(evt);
}
//Written by Jason Karl Davis
if(typeof HTMLElement!='undefined'&&
HTMLElement.prototype.clic
var evt = this.ownerDocument.createE
evt.initMouseEvent('click'
this.dispatchEvent(evt);
}
ASKER
I need to change the selected cell on a tab event. The following is cathing the tab event.
onkeydown="if(event.keyCod e==9){}"
In the case of a tab event it should select the next cell. The alert of "aye" is just to test whether or not the function is being run.
If you change the onkeydown="if(event.keyCod e==9){sele ct('single ',this.par entNode)}" to onkeydown="if(event.keyCod e==9){aler t('yay')}" , it will work, but for some reason it won't work when attemping to call select function.
onkeydown="if(event.keyCod
In the case of a tab event it should select the next cell. The alert of "aye" is just to test whether or not the function is being run.
If you change the onkeydown="if(event.keyCod
Thanks for the clarification.
Does Michel's answer help/resolve your issue?
Does Michel's answer help/resolve your issue?
ASKER
Rock on mp... Simple and elegant. Thanks
This works just fine.
Open in new window