Hinzufügen von Aufzählungszeichen zu mehreren Textareas mit demselben Javascript

Ich fand den unten stehenden Code online, um einem Textarea Aufzählungszeichen hinzuzufügen, und es funktioniert ziemlich gut für einen einzelnen Textarea.Hinzufügen von Aufzählungszeichen zu mehreren Textareas mit demselben Javascript

Script

var CRLF = 10; 
var BULLET = String.fromCharCode(45); 

function Init() { 
    var textareas = document.querySelectorAll('textarea'); 
     [].forEach.call(textareas, function(element) { 
      element.addEventListener("input", OnInput, false); 
     }); 
} 

function OnInput(event) { 
    char = event.target.value.substr(-1).charCodeAt(0); 
    nowLen = txt.value.length; 

    if (nowLen > prevLen.value) { 
     if (char == CRLF) txt.value = txt.value + BULLET + " "; 
     if (nowLen == 1) txt.value = BULLET + " " + txt.value; 
    } 
    prevLen.value = nowLen; 
}

HTML

<body onload="Init();"> 
    <h4>Automatic bullets in a text box</h4> 
    <textarea id="txt" oninput="OnInput(this, 'prevLen');" rows="15" cols="40"></textarea> 
    <input type="hidden" id="prevLen" value="0"/> 
</body>

aber ich kann nicht herausfinden, wie man eine ähnliche Funktion, wie zu schaffen, dass ich es auf mehrere Textbereiche verwenden können.

Ich möchte etwas, wo ich die ID der versteckten Eingabe übergeben kann, so kann ich auf diese Weise angeben, welche Eingabe die Aufzählungszeichen hinzufügen, aber keine funktionierende Lösung erhalten.

Vorschläge/Lösungen willkommen.

Quelle

2016-04-28 JellyTots

eine Liste aller Textareas Holen und den Ereignis-Listener

var textareas = document.querySelectorAll('textarea'); 
[].forEach.call(textareas, function(element) { 
    element.addEventListener("click", OnInput, false); 
});

Sie können jeden gültigen CSS3-Selektor fügen Sie die gewünschten Textbereiche zu erhalten.

Gemäß Ihrer Bearbeitung: Sie können die Elemente zusammen gruppieren, damit Sie als Gruppe auf sie zugreifen können. Jetzt können Sie die Eingabe beliebig verwenden.

<div class="some_wrapper"> 
    <textarea id="txt" oninput="OnInput(this, 'prevLen');" rows="15" cols="40"></textarea> 
    <input type="hidden" id="prevLen" value="0"/> 
</div> 

var wrappers = document.querySelectorAll('some_wrapper'); 
[].forEach.call(wrappers, function(wrapper) { 
    var textarea = wrapper.querySelector("textarea"), 
     input = wrapper.querySelector("input"); 
    //process "input" to get the desired "id", "class",..... 
    textarea.addEventListener("click", function(e) { 
     OnInput(e, input) 
    }, false); 
});

Quelle

2016-04-28 08:23:31 DrColossos

Ich habe den obigen Vorschlag zu meinem Code hinzugefügt, aber das Problem ist, wie ich die ID des versteckten Elements an diese Methode weitergeben. Ich kann das nicht herausfinden, da die Funktion OnInput basierend auf der ID der versteckten Eingabe geschrieben wird, die 'prevLen' ist, aber ich müsste diese Methode für mehrere versteckte Elemente verwenden können. – JellyTots

@JellyTots Ein grundlegendes, nicht funktionierendes Beispiel in meiner Bearbeitung – DrColossos

Lösung auf meine Frage/Problem:

Script/app.js:

var CRLF = 10; 
var BULLET = String.fromCharCode(45); 

function Init() { 

var wrappers = document.querySelectorAll('panel-body'); 
    [].forEach.call(wrappers, function(wrapper) { 
     var textarea = wrapper.querySelector("textarea"), 
     input = wrapper.querySelector("input"); 
     textarea.addEventListener("input", OnInput(), false); 
    }); 
} 

function OnInput(ta,inp) { 
    char = ta.value.substr(-1).charCodeAt(0); 
    nowLen = ta.value.length; 

    if (nowLen > inp.value) { 
     if (char == CRLF) ta.value = ta.value + BULLET + " "; 
     if (nowLen == 1) ta.value = BULLET + " " + ta.value; 
    } 
    inp.value = nowLen; 
}

HTML

<body onload="Init();"> 
<div class="panel-body"> 
<h4>Automatic bullets in a text box</h4> 
<textarea id="ta1" oninput="OnInput(ta1, pv1);" rows="15" cols="40"></textarea> 
<input type="hidden" id="pv1" value="0"/> 

    <h4>Automatic bullets in a text box</h4> 
    <textarea id="ta2" oninput="OnInput(ta2,pv2);" rows="15" cols="40"></textarea> 
    <input type="hidden" id="pv2" value="0"/> 
</div> 
</body>

Die obige Lösung löst das Problem des Hinzufügens Geschosse zu mehreren Textareas.

Quelle

2016-04-28 09:56:30 JellyTots

Hinzufügen von Aufzählungszeichen zu mehreren Textareas mit demselben Javascript

Antwort

Verwandte Themen