Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Modifying .disabled property

    Hi
    I need to change the font color of the disabled textboxes of our application. These disabled textboxes exist at thousands of places both at pageload or disabled conditionally clientside.
    I am aware that in IE8 there is no other way to change the fontcolor except use readonly. So i thought that maybe if I changed the .disabled property to something like -
    Code:
    Object.disabled {
        function set() {
            this.readOnly = value;
         }
    
        function get() {
             return this.readOnly;
         }
    }
    then it would make my task much easier. I searched and found out that Object.defineProperty ,may do the trick. However i am getting the mull reference error. Is there any other way?

  • #2
    hey
    hey is offline
    New Coder
    Join Date
    Jan 2010
    Posts
    38
    Thanks
    0
    Thanked 13 Times in 13 Posts
    Are you trying to change the font color of a disabled textarea? (Below)

    Code:
    <textarea disabled></textarea>
    You should use CSS for this. Object.disabled is undefined, I think you meant to select the textarea object and then access the disabled property from there. Give us some of your code so we can see what you want to do.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Instead of changing the font color, would it be sufficient to change the background color? MSIE does support *that* in disabled fields.

    But your idea of changing disabled to readonly has merit. Not hard to do.

    You do realize there is a significant difference between disabled and readonly as it pertains to form submissions? A disabled field is *NOT* sent from the browser to the URL specified in a <form>'s action= property. A readonly field *IS* sent.

    Now, if your form processing code doesn't care about getting a bunch of fields it maybe wasn't expecting, that won't matter.

    If it does, then you would need to run through and change all the readonly's back to disabled at <form onsubmit=...> time. Again, not hard.

    How do you distinguish between fields that *should* be readonly and those that are fake-disabled? best way would be to add a dummy attribute to the converted fields and then look for it when swapping back.

    **********

    ANYWAY... No, you can't do it as you described. You could *probably* do something similar to that using jQuery, but that would just be shorthand for doing it this way:
    Code:
    function changeDisabledColor( color )
    {
        var inps = document.getElementsByTagName("input");
        for ( var i = 0; i < inps.length; ++i )
        {
            var inp = inps[i];
            if ( inp.disabled ) 
            {
                inp.readonly = true;
                inp.disabled = false;
                inp.style.color = color;
                inp.setAttribute("fakeDisabled", "yes"); // ONLY IF NEEDED
            }
        }
    }
    Then, when the <form> gets submitted, call this function to set them back *IF NEEDED*:
    Code:
    function restoreDisabled( )
    {
        var inps = document.getElementsByTagName("input");
        for ( var i = 0; i < inps.length; ++i )
        {
            var inp = inps[i];
            if ( inp.readonly && inp.getAttribute("fakeDisabled") != null )
            {
                inp.disabled = true;
            }
        }
    }
    This is untested, but it should be roughly right.

    If you have any non-<input> fields that need this same treatment (e.g., <select>?) they are easy to add.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    nkaul (04-09-2012)

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Oh, and by the by, MSIE 9 has the same problem. Idiots.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    @hey The code i wrote was just a tentative one. I am not using it anywhere. I just wanted to know if there is some way of overridding the .disabled property of javascript. I suppose we can't.
    Also, i need to change the fontcolor for a disabled textbox and IE doesn't pick up the CSS for a disabled textbox. I can send you the code but i think this issue is pretty generic. Let me know if you need it.

  • #6
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    @Old Pendant
    In order

    Nah I have been given specific requirements to change both the fontcolor and the backcolor.

    Yes i know it isnt very hard to do. But its totally monotonous and time-consuming. Plus i have to change it in almost 500 pages with multiple instances on each page.

    Our code doesnt worry about the extra elements being submitted so Thank God for that or else that wouldv'e been taxing.

    Regarding your soluion, I was thinking along the same lines. However instead of doing it in javascript I used a different approach. We have our own customized textboxes and i added a similar code in the library for rendering that control. This should take care of all the permanently 'readonly' controls. However there are a huge no of textboxes which are disabled onload onclientside. For those controls i may be able to use your code or i could start changing .disabled to .readOnly. I am not sure yet which approach to follow.

    Another issue here is the fields that get disabled by user interaction(checking a checkbox and stuff like that). I HAVE to change .disabled to .readonly for those fields in our code. There doesn't seem to be any other way for this.

    I am facing another issue here. The readonly fields take focus. I do not want that. So i thought i could use onfocus = this.blur(); THis doesnt seem to work. Is there any other way past that. I am afraid that your anwer would be to explicitly specify the next control where the focus should go. If that's the case i might as well give up right now.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •