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

onClick and input type="text"

P: n/a
Hi!

In my form I have table which cells contain input objects of type="text"
which initially are disabled. I would like to activate them by clicking on
them. However because input object does not support onClick event (or maybe
I am wrong?) I use onClick events of table cells. And it works as required
in IE 6. I click on the input object and the onClick event of the cell is
raised. But it does not work in Firefox (I have not yet checked the other
browsers). Does anyone have an idea how to solve this problem? I would not
like to add more objects to this form, the most I am interested in achiving
in Firefox the same effect like in IE.

Regards
Silmar
Jul 23 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Silmar wrote:
In my form I have table which cells contain input objects of
type="text" which initially are disabled. I would like to activate
them by clicking on them.


That makes not much sense. Disabling a form control means that
clicking it should have no effect, so what you want to do, is to
mimic the behaviour of a non-disabled control for a disabled one,
so you could simply do this without disabling and should get what
you intend.

ciao, dhgm
Jul 23 '05 #2

P: n/a
> However because input object does not support onClick event (or maybe I am
wrong?)


Small errata - onClick event is fired for enabled (disabled = 0) input
objects.

Regards
Silmar
Jul 23 '05 #3

P: n/a
Silmar wrote:
Hi!

In my form I have table which cells contain input objects of type="text" which initially are disabled. I would like to activate them by clicking on them. However because input object does not support onClick event (or maybe I am wrong?) I use onClick events of table cells. And it works as required in IE 6. I click on the input object and the onClick event of the cell is raised. But it does not work in Firefox (I have not yet checked the other browsers). Does anyone have an idea how to solve this problem? I would not like to add more objects to this form, the most I am interested in achiving in Firefox the same effect like in IE.

Regards
Silmar


Hi Silmar.

Disabled inputs in moz are deader than Francisco Franco...IE still
fires clicks on them which bubble but Firefox does nothing. Just for
fun, I threw this together (even though I basically agree with Dietmar
Meier's usability assessment above). Use a class for flagging.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">

form {
width: 120px;
}
input {
margin: 6px;
}
input.normal {
border: 1px #000 solid;
}
input.enab {
border: 2px #000 solid;
}

</style>
<script type="text/javascript">

function getLeft(node)
{
var lPos = node.offsetLeft;
while (node = node.offsetParent)
lPos += node.offsetLeft;
return lPos;
}

function getTop(node)
{
var tPos = node.offsetTop;
while (node = node.offsetParent)
tPos += node.offsetTop;
return tPos;
}

window.onload = function()
{

function handler(e)
{
var tgt, ipt;
if ((e = e || window.event)
&& (tgt = e.srcElement || e.target))
{
ipt = tgt.nextSibling;
ipt.disabled = !ipt.disabled;
if (!ipt.disabled)
{
ipt.focus();
ipt.select();
}
}
}

var i = 0,
ipt,
div,
ipts = document.getElementsByTagName('input');
while (ipt = ipts.item(i++))
if (/\benab\b/.test(ipt.className))
{
ipt.disabled = true;
div = document.createElement('div');
div.style.position = 'absolute';
div.style.left = getLeft(ipt) + 'px';
div.style.top = getTop(ipt) + 'px';
div.style.width = ipt.offsetWidth + 'px';
div.style.height = ipt.offsetHeight + 'px';
div.onclick = handler;
ipt.parentNode.insertBefore(div, ipt);
}
}

</script>
</head>
<body>
<form>
<input class="enab" type="text" value="foo">
<input class="enab" type="text" value="feh">
<input class="normal" type="text" value="hah">
</form>
</body>
</html>

Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.