Podstawy:

Stylizuję textlai z CSS i używając JavaScript, aby podświetlić Textarea, gdy użytkownik kliknie wewnątrz.

Działa to dobrze z jednym textlai, ale kiedy próbuję zrobić więcej (zmieniając javascript z .getElementById do .getElementsByClassName i odpowiednio aktualizuję znaczniki) Pamięć coś i stracić wszystkie CSS.

Jak mogę wykonać tę pracę z dwoma teksturami?

Okrzyki i dzięki za pomoc!

.HTML Strona:

<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
}       
2
karhu 10 grudzień 2011, 09:29

3 odpowiedzi

Najlepsza odpowiedź

Próbowałem edytować odpowiedź Mrtshermana, ale moja sugestia została odrzucona, więc po prostu dodam nową odpowiedź. Kod poniżej naprawia jego.

Przełączanie z .getElementById do .getElementsByClassName wymaga trzech rzeczy:

  1. Zmiana id do class na elementach textarea.
  2. Aktualizowanie CSS z textarea#styled do textarea.styled.
  3. Użyj .getElementsByClassName zamiast .getElementById (Uwaga, zwraca tablicę elementów, a nie jeden).

DEMO: http://jsfiddle.net/thinkingStiff/wnjar/

Scenariusz:

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;

        };

    };

};
0
ThinkingStiff 17 grudzień 2011, 21:47

Po pierwsze, nie powinieneś mieć 2 elementów na tej samej stronie z tym samym identyfikatorem. Jeśli chcesz zastosować ten sam styl do 2 różnych elementów na tej samej stronie, użyj klasy = "stylizowany" zamiast id = "stylizowany". Identyfikator powinien jednoznacznie * ID * Podłymo się pojedynczy element w HTML.

Po drugie, nie użyję dokumentu.getElementbyd ani żadnego rodzaju surowego javascript, aby to zrobić. Lepiej korzystasz z biblioteki jak jQuery, aby obsługiwać takie rzeczy.

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 (Funkcja () {$ (to) .DClass ("stylizowany");});

Spójrz na referencję jQuery.

1
danludwig 10 grudzień 2011, 05:50

Jeśli chcesz stylować elementy, nie potrzebujesz tego w ogóle JavaScript. Użyj: Focus Pseudoselector, aby to zrobić.

textarea:focus { color: blue; }

Aktualizacja:

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;
        };
    };
}
0
mrtsherman 10 grudzień 2011, 22:57