Как я могу заставить этот маленький javascript работать с 2 элементами textarea, не убивая CSS?

Question

Основы:

Я создаю текстовую область с помощью CSS и использую javascript для выделения текстовой области, когда пользователь щелкает внутри.

Это прекрасно работает с одной текстовой областью, но когда я пытаюсь сделать больше (изменяя javascript с .getElementById на .getElementsByClassName и соответственно обновляя теги), я что-то путаю и теряю весь CSS.

Как я могу сделать эту работу с двумя текстовыми областями?

Приветствия и спасибо за вашу помощь!

.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
}       

Answer 1

Во-первых, у вас не должно быть 2 элементов на одной странице с одинаковым идентификатором.Если вы хотите применить один и тот же стиль к 2 различным элементам на одной странице, используйте class = "styled" вместо id = "styled".Идентификатор должен однозначно * id * включать один элемент в HTML.

Во-вторых, я бы не использовал document.getElementById или какой-либо необработанный javascript для этого.Вам лучше использовать такую ​​библиотеку, как jQuery, для обработки таких вещей.

textarea.unstyled {
    background-color: #e5fff3;
} 

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

<textarea name="styled-textarea1" id="styled-textarea1" class="unstyled">
    Content
</textarea>
<textarea name="styled-textarea2" id="styled-textarea2" class="unstyled">
    Content
</textarea>

$ ('textarea'). Focus (function () {$ (this) .addClass ('styled'));});

Взгляните на ссылку jQuery .

Answer 2

Я пытался отредактировать ответ мртшермана, но мое предложение было отклонено, поэтому я просто добавлю новый ответ. Код ниже исправляет его.

Для переключения с .getElementById на .getElementsByClassName требуется три вещи:

1. Изменение id на class на обоих элементах textarea.
2. Обновление вашего CSS с textarea#styled до textarea.styled.
3. Используйте .getElementsByClassName вместо .getElementById (обратите внимание, он возвращает массив элементов, а не один).

Демо: http://jsfiddle.net/ThinkingStiff/WnJar/

Сценарий:

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;

        };

    };

};

Answer 3

Если вы хотите стилизовать элементы, тогда вам вообще не нужен javascript.Используйте псевдоселектор: focus для этого.

textarea:focus { color: blue; }

Обновление:

http://jsfiddle.net/EZaVA/3

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;
        };
    };
}