Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Noneditable input field

Posted on 1999-06-25
21
Medium Priority
?
224 Views
Last Modified: 2008-02-20
I'm wondering how to create a field in HTML, which can be changed with JavaScript code but not by the user.
0
Comment
Question by:marko020397
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 7
  • 3
  • +2
21 Comments
 
LVL 1

Expert Comment

by:BillyAbbott
ID: 1851189
you could put a bit of javascript in the onFOcus event of the textbox...

<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(?))
0
 
LVL 9

Expert Comment

by:TTom
ID: 1851190
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
0
 
LVL 1

Expert Comment

by:BillyAbbott
ID: 1851191
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.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 33

Expert Comment

by:knightEknight
ID: 1851192
<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.myform." + element.name + ".blur()",1);
   }
}


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.myform);'>
<FORM name='myform'>

 My Field: &nbsp;
 <INPUT type='text'   name='myfield'  value='kEk' width='12' maxlength='24'
        onFocus='onFieldFocus(this)'><BR>

 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)'>blah blah blah</textarea><P>

 <INPUT type='button' name='mybutton' value=' Enabled ' onClick='disable_enable(this.form);'>

 <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("document.myform.myfield2.blur()",1)'><BR>

</form>

</body>
</html>


0
 
LVL 1

Expert Comment

by:BillyAbbott
ID: 1851193
the only problem i can see with KnightEKnight's answer is that it grays out the text in the field...
0
 
LVL 9

Expert Comment

by:TTom
ID: 1851194
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
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 1851195
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.
0
 
LVL 9

Expert Comment

by:TTom
ID: 1851196
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
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 1851197
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!
0
 
LVL 6

Expert Comment

by:PBall
ID: 1851198
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.
0
 
LVL 9

Expert Comment

by:TTom
ID: 1851199
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
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 1851200
>> 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.

0
 
LVL 9

Expert Comment

by:TTom
ID: 1851201
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 (;-}
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 1851202
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. )

0
 
LVL 4

Author Comment

by:marko020397
ID: 1851203
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.


0
 
LVL 9

Expert Comment

by:TTom
ID: 1851204
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
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 1851205
Tom should have the points.  I believe NS3 and IE3 do better using setTimeout.
0
 
LVL 9

Expert Comment

by:TTom
ID: 1851206
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
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 1851207
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!
0
 
LVL 4

Author Comment

by:marko020397
ID: 1851208
Tom,

what are you waiting for. Post an answer and you'll get points.

Marko
0
 
LVL 9

Accepted Solution

by:
TTom earned 800 total points
ID: 1851209
Marko:

Thanks!  Just waiting for an 'invitation'. <G>  (Didn't want to post if you wanted to award points to kEk.)

Tom
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

715 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question