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>
