readonly select element

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • kaeli
    #1

    readonly select element

    All,

    I have need of a readonly select element that looks and acts disabled to
    the user. The problem with the disabled attribute is that the value
    isn't passed to the handler, so I'm using readonly. Problem with
    readonly is that is allows focus, which when the user highlights, then
    hits backspace (as if to change the field), the browser does a
    history.back. This is confusing to users.

    The following code works great in NN6, but IE ignores it.
    Any suggestions?

    Desired behaviour: clicking on the element does nothing; nothing can be
    selected. Element cannot have focus.
    Behavior acheived in NN6.
    Behavior in IE: clicking selects it. Changing the selection changes it.
    (tried onChange return false, etc).

    <html>
    <head>
    <title> New Document </title>
    </head>

    <body>

    <form name="f1">
    <select name='choice' id='choice' readonly style='backgrou nd-color:
    #ababab' onFocus='this.b lur(); return false;'>
    <option value='' selected> </option>
    <option value='Y'>Y</option>
    <option value='N'>N</option>
    </select>
    </form>

    </body>
    </html>



    --
    --
    ~kaeli~
    Local Area Network in Australia:... the LAN down under.
    http://www.ipwebdesign.net/wildAtHeart

    http://www.ipwebdesign.net/kaelisSpace


    Tags: None
    • Randy Webb
      #2
      Re: readonly select element

      kaeli wrote:[color=blue]
      > All,
      >
      > I have need of a readonly select element that looks and acts disabled to
      > the user. The problem with the disabled attribute is that the value
      > isn't passed to the handler, so I'm using readonly. Problem with
      > readonly is that is allows focus, which when the user highlights, then
      > hits backspace (as if to change the field), the browser does a
      > history.back. This is confusing to users.
      >
      > The following code works great in NN6, but IE ignores it.
      > Any suggestions?
      >
      > Desired behaviour: clicking on the element does nothing; nothing can be
      > selected. Element cannot have focus.
      > Behavior acheived in NN6.
      > Behavior in IE: clicking selects it. Changing the selection changes it.
      > (tried onChange return false, etc).
      >
      > <html>
      > <head>
      > <title> New Document </title>
      > </head>
      >
      > <body>
      >
      > <form name="f1">
      > <select name='choice' id='choice' readonly style='backgrou nd-color:
      > #ababab' onFocus='this.b lur(); return false;'>
      > <option value='' selected> </option>
      > <option value='Y'>Y</option>
      > <option value='N'>N</option>
      > </select>
      > </form>
      >
      > </body>
      > </html>
      >
      >
      >[/color]

      Why not just use a hidden field to store the original value?

      window.onload=s etHidden;
      function setHidden(){
      document.f1.cho ice.value = document.f1.dis playedChoice.va lue;
      }


      <form name="f1">
      <select name='fakeChoic e' readonly style='backgrou nd-color:#ababab'>
      <option value='' selected> </option>
      <option value='Y'>Y</option>
      <option value='N'>N</option>
      </select>
      <input type="text" name="choice" value="">
      </form>

      Not sure I want to ask why you are using a select list if you don't want
      it used. Or are you toggling the readonly?

      --
      Randy

        Comment

        • kaeli
          #3
          Re: readonly select element

          In article <h4GdnQP6HIe5bp jdRVn-gQ@comcast.com> , hikksnotathome@ aol.com
          enlightened us with...[color=blue]
          >
          > Why not just use a hidden field to store the original value?
          >[/color]

          The users want a consistent appearance.
          This was how it was done originally.

          Thanks, though.

          Anyone else?

          --
          --
          ~kaeli~
          Kill one man and you are a murderer. Kill millions and you
          are a conqueror. Kill everyone and you are God.
          http://www.ipwebdesign.net/wildAtHeart

          http://www.ipwebdesign.net/kaelisSpace


            Comment

            • kaeli
              #4
              Re: readonly select element

              In article <h4GdnQP6HIe5bp jdRVn-gQ@comcast.com> , hikksnotathome@ aol.com
              enlightened us with...[color=blue]
              >
              > Not sure I want to ask why you are using a select list if you don't want
              > it used. Or are you toggling the readonly?[/color]

              Because the users want a consistent appearance. Elements on the page
              they can edit are normal looking. Elements they can't are greyed out.
              Users have different permissions, so the screen has elements they can
              edit and elements they can't.
              The elements are written dynamically with JSP taglibs that look at a
              session var to tell what permissions a user has.

              Originally, elements they could edit were elements and stuff they
              couldn't edit was plain text with hidden inputs.

              --
              --
              ~kaeli~
              Kill one man and you are a murderer. Kill millions and you
              are a conqueror. Kill everyone and you are God.
              http://www.ipwebdesign.net/wildAtHeart

              http://www.ipwebdesign.net/kaelisSpace


                Comment

                • kaeli
                  #5
                  Re: readonly select element

                  In article <MPG.1a6f507d7c 077293989ae9@nn tp.lucent.com>,
                  tiny_one@NOSPAM .comcast.net enlightened us with...[color=blue]
                  >
                  > Desired behaviour: clicking on the element does nothing; nothing can be
                  > selected. Element cannot have focus.
                  > Behavior acheived in NN6.
                  > Behavior in IE: clicking selects it. Changing the selection changes it.
                  > (tried onChange return false, etc).
                  >[/color]

                  The following worked in IE6 and NN6. Not tested in other browsers.
                  <select name='choice' id='choice' readonly style='backgrou nd-color:
                  #ababab'
                  onFocus='this.i nitialSelect = this.selectedIn dex;'
                  onChange='this. selectedIndex = this.initialSel ect;'>

                  --
                  --
                  ~kaeli~
                  Why do they sterilize the needles for lethal injections?
                  http://www.ipwebdesign.net/wildAtHeart

                  http://www.ipwebdesign.net/kaelisSpace


                    Comment

                    Previous template Next
                    Working...