How can I make this little javascript work with 2 textarea elements without killing the CSS?


Tags: javascript,css,textarea,highlighting

Problem :

The basics:

I'm styling a textarea with CSS, and using javascript to highlight the textarea when the user clicks inside.

This works fine with one textarea, but when I try to make more (by changing the javascript from .getElementById to .getElementsByClassName and updating the tags accordingly) I mess something up and lose all of the CSS.

How can I make this work with two textareas?

Cheers and thanks for your help!

.html page:

<textarea name="styled-textarea" id="styled" ; this.onfocus=null; setbg('#e5fff3')">All      this nice stuff goes inside here | http://www.website.com</textarea>

<script type="text/javascript">
    var textBox = document.getElementById("styled");
    textBox.onfocus = function() {
    textBox.select();

    // Work around Chrome's little problem
    textBox.onmouseup = function() {
        // Prevent further mouseup intervention
        textBox.onmouseup = null;
        return false;
    };
};
</script>

All this nice stuff goes inside here.
<textarea name="styled-textarea" id="styled" ; this.onfocus=null; setbg('#e5fff3')">All     this nice stuff goes inside here | http://www.website.com</textarea>

CSS:

textarea#styled {
width: 60%;
font-size: 24px;
border: 3px solid #cccccc;
padding: 5px;
font-family:'Arial', sans-serif
}       


Solution :

I tried to edit mrtsherman's answer, but my suggestion was rejected, so I'll just add a new answer. The code below fixes his.

Switching from .getElementById to .getElementsByClassName requires three things:

  1. Changing id to class on both your textarea elements.
  2. Updating your CSS from textarea#styled to textarea.styled.
  3. Use .getElementsByClassName instead of .getElementById (note, it returns an array of elements, not one).

Demo: http://jsfiddle.net/ThinkingStiff/WnJar/

Script:

var textBoxes = document.getElementsByClassName("styled");

for (var i = 0; i < textBoxes.length; i++) {

    var textBox = textBoxes[i];

    textBox.onfocus = function() {

        this.select();

        // Work around Chrome's little problem
        this.onmouseup = function() {

            // Prevent further mouseup intervention
            this.onmouseup = null;
            return false;

        };

    };

};

    CSS Howto..

    How to change the opacity of image on hover using css

    How to pop a dialog box /iframe/Lightbox like one below above the webpage content [closed]

    How to set size of SVG image in :before pseudo-class?

    How can I create inline CSS in a WordPress PHP file without referencing to an external CSS file?

    How to change font size of the first option tag in a dropdown menu (select)?

    How to I get this element to span 100% of LI? [closed]

    how to insert a ribbon inside a div how background without images only pure css? [closed]

    How do I achieve a fully working image scrolling effect like in this example?

    Show s horizontally in a div
    table { display: inline-block; } This should work just fine for you....
    Read more

    How to add CSS to page to the bottom of the custom chrome extension

    How to solve this layout design-error due to conflicting css?

    how to properly use CSS Class and ID [closed]

    How to change active color of bootstrap button group to have different color for each button

    Polymer 1.x: How to imperatively (using JS) obtain the value of a custom CSS property?

    how to remove table border line?

    How to get use the functionality same as “-webkit-appearance” in firefox?

    How to use 3-digit color codes rather than 6-digit color codes in CSS?

    how to adjust CSS image on mobile device while maintaining the aspect ratio

    how can i prevent to take input onkeypress anything other than alphanumeric

    Django. how to apply css style on boolean form field?

    Does anyone know how to store a css change made by javascript function locally?

    How To Select Two classes with CSS?

    How can I place html text on top of a canvas flot chart?

    How do I fix this alignment issue in jQuery & CSS?

    TW Bootstrap: How to overflow columns

    How to create DRY CSS when using transform & keyframes

    how to align the content to center of page using css

    Bootstrap How-to: checkbox should change text input value when selected/checked [closed]

    how to call td's id to change css style onclick

    How to create HTML/CSS menu 100% width where text goes to the edges?