Make input form read-only?

Question

I have a bunch of forms that have a lot of <input type="text"> fields on them. The user now is requiring that I provide a "read-only" version of every single form. I would recode every field into an

<xsl:choose>
<xsl:when test="/..../permission = 'E'>
  <input ....>
</xsl:when>
<xsl:otherwise>
  ...
</xsl:otherwise>
</xsl:choose>

mess, but I'm hoping for something a little more elegant. A friend suggested

  $(function () {
        <xsl:if test="/.../permission != 'E'">
            $('input').keypress(function() { return false; });
        </xsl:if>
    });

which does part of what I want, but you can still paste into the fields and you can still delete from them.

Answer 1

Judging from the fact that you're using XSLT, I'd say you're outputting in one of the XHTML doctypes, so why not just make the input element you're creating have the disabled attribute?

<input type="..." disabled="disabled" />

You could do this immediately in XSLT. If you're using the same input all over the place just create a template for it and use <xsl:apply-template .../> inside the test.

Post-comment edit

Apparently there's a readonly attribute as well. Silly :)

<input type="..." readonly="readonly" />

Answer 2

I've gone the simple route:

       $(function () {
            <xsl:if test=".../permission != 'E'">
                $('input[type="text"').attr('readonly','readonly');
            </xsl:if>
        });

I don't know why I'd never heard of the "readonly" attribute before.

Answer 3

There are differences between readonly and disabled fields- the values of readonly fields are uploaded with a form, and readonly elements can be tabbed and focused and selected, unlike disabled fields.

Also, if you change the value in straight javascript you must use 'readOnly', while html is case insensitive, and most libraries take care of it for you.