marko020397
asked on
Noneditable input field
I'm wondering how to create a field in HTML, which can be changed with JavaScript code but not by the user.
Actually,
<input type=text onfocus="this.blur()">
will take focus away from the object. That way, you don't have to worry about what else is on the page. Only possible problem I can see is if the textbox is the only element on the page. Haven't tried that out yet.
Tom
<input type=text onfocus="this.blur()">
will take focus away from the object. That way, you don't have to worry about what else is on the page. Only possible problem I can see is if the textbox is the only element on the page. Haven't tried that out yet.
Tom
i've always wondered what blur did, quite obvious isn't ti......
it works in ie4 when there is only one component on the page.
it works in ie4 when there is only one component on the page.
<HTML>
<HEAD>
<TITLE>Enabling/Disabling Fields in NetScape and IE</title>
<SCRIPT language='javascript'>
<!-- //
function disable_enable(form)
{
form.myfield.disabled = !form.myfield.disabled;
form.myselect.disabled = !form.myselect.disabled;
form.mytextarea.disabled = !form.mytextarea.disabled;
window.status = 'Setting disabled flags to: ' + form.myfield.disabled;
form.mybutton.value = ( form.myfield.disabled ) ? "Disabled" : "Enabled";
}
function onFieldFocus(element)
{
window.status = element.name + ' disabled flag is: ' + element.disabled;
if ( element.disabled )
{
// you might be tempted to do this: element.blur();
// but this may cause problems for earlier browsers. Use setTimeout:
setTimeout("document.myfor
}
}
function onPageLoad(form)
{
// initialize disabled flags
form.myfield.disabled = false;
form.myselect.disabled = false;
form.mytextarea.disabled = false;
form.myfield.focus();
form.myfield.select();
}
// -->
</script>
</head>
<BODY onLoad='onPageLoad(this.my
<FORM name='myform'>
My Field:
<INPUT type='text' name='myfield' value='kEk' width='12' maxlength='24'
onFocus='onFieldFocus(this
My Select:
<SELECT name='myselect' disabled onFocus='onFieldFocus(this
<OPTION></option>
<OPTION>opt 1</option>
<OPTION>opt 2</option>
<OPTION>opt 3</option>
</select><BR>
My Text Area:<BR>
<TEXTAREA name='mytextarea' wrap rows='4' cols='32' onFocus='onFieldFocus(this
<INPUT type='button' name='mybutton' value=' Enabled ' onClick='disable_enable(th
<P>
<!-- to permanently disable a field, it is not so complicated: -->
Always Disabled:
<INPUT type='text' name='myfield2' disabled value="I'm Disabled!" width='14' maxlength='24'
onFocus='setTimeout("docum
</form>
</body>
</html>
<HEAD>
<TITLE>Enabling/Disabling Fields in NetScape and IE</title>
<SCRIPT language='javascript'>
<!-- //
function disable_enable(form)
{
form.myfield.disabled = !form.myfield.disabled;
form.myselect.disabled = !form.myselect.disabled;
form.mytextarea.disabled = !form.mytextarea.disabled;
window.status = 'Setting disabled flags to: ' + form.myfield.disabled;
form.mybutton.value = ( form.myfield.disabled ) ? "Disabled" : "Enabled";
}
function onFieldFocus(element)
{
window.status = element.name + ' disabled flag is: ' + element.disabled;
if ( element.disabled )
{
// you might be tempted to do this: element.blur();
// but this may cause problems for earlier browsers. Use setTimeout:
setTimeout("document.myfor
}
}
function onPageLoad(form)
{
// initialize disabled flags
form.myfield.disabled = false;
form.myselect.disabled = false;
form.mytextarea.disabled = false;
form.myfield.focus();
form.myfield.select();
}
// -->
</script>
</head>
<BODY onLoad='onPageLoad(this.my
<FORM name='myform'>
My Field:
<INPUT type='text' name='myfield' value='kEk' width='12' maxlength='24'
onFocus='onFieldFocus(this
My Select:
<SELECT name='myselect' disabled onFocus='onFieldFocus(this
<OPTION></option>
<OPTION>opt 1</option>
<OPTION>opt 2</option>
<OPTION>opt 3</option>
</select><BR>
My Text Area:<BR>
<TEXTAREA name='mytextarea' wrap rows='4' cols='32' onFocus='onFieldFocus(this
<INPUT type='button' name='mybutton' value=' Enabled ' onClick='disable_enable(th
<P>
<!-- to permanently disable a field, it is not so complicated: -->
Always Disabled:
<INPUT type='text' name='myfield2' disabled value="I'm Disabled!" width='14' maxlength='24'
onFocus='setTimeout("docum
</form>
</body>
</html>
the only problem i can see with KnightEKnight's answer is that it grays out the text in the field...
Complicated!
You're right about graying out the text in disabled fields.
kEk's solution does allow you to enable/disable the fields 'on command' and does allow for the possibility of older browsers needing the setTimeout to function properly.
Tom
You're right about graying out the text in disabled fields.
kEk's solution does allow you to enable/disable the fields 'on command' and does allow for the possibility of older browsers needing the setTimeout to function properly.
Tom
Catch-22 there on the setTimeout. Some older browsers need the setTimeout to handle the blur properly, other really really old browsers don't know what setTimeout is :(
As to the graying (which is IE only), that is because "disabled" is an existing property on these elements. You could do the same thing with a custom disabled flag and it won't gray. Without testing, I'd say you could simply replace all occurrances of disabled with flgdisabled and it should work the same way without graying.
As to the graying (which is IE only), that is because "disabled" is an existing property on these elements. You could do the same thing with a custom disabled flag and it won't gray. Without testing, I'd say you could simply replace all occurrances of disabled with flgdisabled and it should work the same way without graying.
If the implication of your comment is that using DISABLED will not gray out the text in NS, that's probably becuase (my understanding is) NS does not support DISABLED. Previous EE questions have indicated that the only way to disable fields for input in NS is to use blur().
Tom
Tom
Yes on the blur() in NS, but it will also work in IE, that is why you can just do a search/replace in the code above on "disabled" to "flgdisabled" and it will still work in both NS and IE -- but without the graying. BTW I have tested this now, and it worked!
I don't get it...if it is not editable why bother using input field? just use table or something unless you want it to be togglable (i.e. it will require a certain field to be entered first before you can enter things in the "readonly" field. If scrollability is your goal, alternative ways exists for DHTML capable browser. Look at www.webreference.com/dhtml on netscape scroll bar control. That is one option. IE comes built in w/ IFRAME or you can create a DIV w/ css tag overflow:auto that will make that DIV scrollable.
I'm confused. Are you saying that the 'ultimate' solution is to use blur() to handle both IE and NS?
That's what I suggested in the first place.
If so, your code allows the user to make the field editable. But that's the whole point, to keep the user from editing the field.
Whatever makes marko happy!
Now get back to work so I can answer some questions. <G>
Tom
That's what I suggested in the first place.
If so, your code allows the user to make the field editable. But that's the whole point, to keep the user from editing the field.
Whatever makes marko happy!
Now get back to work so I can answer some questions. <G>
Tom
>> Are you saying that the 'ultimate' solution is to use blur() to handle both IE and NS?
'ultimate' is kind of a strong word. All I'm saying is that it will work for both IE and NS, and in early versions (3.x) of each. And yes, you beat me to the punch on this one :)
>> if it is not editable why bother using input field?
because of the requirement "...which can be changed with JavaScript code but not by the user." And as previously stated, this will work in version 3 browsers and higher -- both NS and IE.
'ultimate' is kind of a strong word. All I'm saying is that it will work for both IE and NS, and in early versions (3.x) of each. And yes, you beat me to the punch on this one :)
>> if it is not editable why bother using input field?
because of the requirement "...which can be changed with JavaScript code but not by the user." And as previously stated, this will work in version 3 browsers and higher -- both NS and IE.
kEk:
Oops! Think I was treading a little hard. Wasn't my intention. "Ultimate" wasn't intended to indicate quality, just timing (guess I could have said 'final', but then, nothing in this game is ever 'final'). I just wanted to be clear that I hadn't missed a solution to the problem other than using blur().
As long as marko gets what he needs, the points are only for fun (and you've been having a lot of fun lately <G>).
Sorry if I sounded 'pissy'. I always forget that you can't see expressions, only words.
Tom (;-}
Oops! Think I was treading a little hard. Wasn't my intention. "Ultimate" wasn't intended to indicate quality, just timing (guess I could have said 'final', but then, nothing in this game is ever 'final'). I just wanted to be clear that I hadn't missed a solution to the problem other than using blur().
As long as marko gets what he needs, the points are only for fun (and you've been having a lot of fun lately <G>).
Sorry if I sounded 'pissy'. I always forget that you can't see expressions, only words.
Tom (;-}
Not at all -- I didn't take it that way. And yes, the points are for fun, and since "ultimately" blur() is the solution here, the points are yours -- first come, first server!
( I just caught that little typo -- it wasn't intentional, but I thought I'd leave it in. )
( I just caught that little typo -- it wasn't intentional, but I thought I'd leave it in. )
ASKER
Well guys, I was looking for something like "disabled", but the page should support any browser.
I'm currently using blur command but this is not working very well. On slower computers you can type some text in the field before the blur happens.
kEk, do you perhaps know which versions of browsers require the setTimeOut?
I gues my question will remain unanswered. Tom, if you would like the points anyway (you did suggest the "only" option that works), offer an answer.
I'm currently using blur command but this is not working very well. On slower computers you can type some text in the field before the blur happens.
kEk, do you perhaps know which versions of browsers require the setTimeOut?
I gues my question will remain unanswered. Tom, if you would like the points anyway (you did suggest the "only" option that works), offer an answer.
marko:
I will offer an answer unless you would prefer to cancel the question and keep the points (or perhaps give them to kEk if he answers your question about which browsers need the setTimeout()).
Tom
I will offer an answer unless you would prefer to cancel the question and keep the points (or perhaps give them to kEk if he answers your question about which browsers need the setTimeout()).
Tom
Tom should have the points. I believe NS3 and IE3 do better using setTimeout.
kEk:
Thanks for 'vote of confidence'. (I still need the points to catch up to you <G>)
marko:
What is your pleasure? I will post answer if you don't want to 'reclaim' points.
Tom
Thanks for 'vote of confidence'. (I still need the points to catch up to you <G>)
marko:
What is your pleasure? I will post answer if you don't want to 'reclaim' points.
Tom
he he! I had a good run of points in the JS forum a few weeks back (it was really slow around here -- no longer!), but in the HTML forum, I've got a steep climb ahead!
ASKER
Tom,
what are you waiting for. Post an answer and you'll get points.
Marko
what are you waiting for. Post an answer and you'll get points.
Marko
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
<input type=text onFocus="object.focus();">
where object is another object that you have named on the page which can be given the focus (a button, text field, link(?))