Internet Explorer Archives

In my last project I ran into an annoying nuance of IE9 but turned out to be IE (Internet Explorer) in general. IE does not like to acknowledge the maxLength property that you can set on a <textarea> tag. In FireFox as well as in Chrome you could set this property to the desired length and the browser would acknowledge this and stop user input at the desired length. Take a look at the following snippet.

<textarea id="limitChars" rows="5" cols="86" maxlength="1000">

In this snippet, the attribute to look at is maxlength=”1000″. Make sure you have this set as it works well in FireFox and in Chrome. Now, let’s talk about Internet Explorer. From my project it looks like IE7, IE8, IE9, and IE10 don’t care about the maxlength attribute and will let the user keep typing long beyond what you desire. So there are two pieces to this puzzle that I found fit my likings best. The first is we bind the <textarea> to the keyup event like so.

$('# limitChars').keyup(function () {
     //Code
});

In binding the textarea to this keyup event it will be fired on every keystroke. So inside of this event we now just have to check the length of characters in the texarea and either do nothing or we will cut it down. So let’s add the code in the middle.

$('#limitChars').keyup(function () {
     //Get the value of the textarea.
     var valueOfInput = $("#limitChars").val();

     //Check and see if its over our desired limit.

     if (valueOfInput.length > 1000) {
          //We reset the characters they have typed and cut it off to 1000.

          $("#limitChars").html(valueOfInput.substr(0, 1000));
     }
});

It causes a bit of weird behavior when they get to the limit but up until that limit it works quite well.

Targeting IE6 and IE7 in CSS, as many of you know, becomes an extremely useful yet hack type of way of coding when you have to support these old browsers. Some CSS hacks have made it a lot easier to handle the little quirks and override the main CSS to target a specific version. There are two characters, one for IE6 and one for IE7. Here is how it looks.

#divName
{
     padding: 5px;  /* shows in all browsers */
     *padding: 5px; /* shows in IE7 and earlier */
      _padding: 5px; /* shows in IE6 and earlier */
}

Really simple; by adding the preceding characters, it can change your CSS world. I try at all costs to avoid doing such things because I don’t like how it clutters up my CSS page. However, sometimes it’s just the easiest/quickest way to get the desired result you need when you have a deadline to meet.

There is another way to try and force CSS that is not working at that is by using a modifier called !important. However, this can make code messy and hard to maintain and I recommend avoiding at all costs.

Here is an example:

p {
    color: blue !important;
}

This means, regardless of what color style you use on an paragraph tag in other CSS, it will be trumped and will show up blue. Use wisely my friends.

Adam Things

Limiting TextArea Characters In Internet Explorer

Targeting IE6 and IE7 in CSS

Recent Posts

Categories

Archives

Recent Comments

Friends

StackOverflow Profile

WordPress