Question

我在网上找到了以下代码，可以在textarea中添加项目符号，对单个文本区域来说效果非常好。

脚本

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>

然而，我无法弄清楚如何创建一个类似的功能，以便我可以在多个textareas上使用它。

我想要一些可以通过隐藏输入的id传递的内容，因此我可以指定添加项目符号的输入方式，但无法获得有效的解决方案。

建议/解决方案欢迎。

Answer 1

获取所有textareas的列表并添加事件监听器

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

您可以使用任何有效的CSS3选择器来获取所需的textareas。

根据你的编辑：您可以将元素组合在一起，以便可以作为一组访问它们。现在，您可以以任何您喜欢的方式使用输入。

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

Answer 2

我的查询/问题的解决方案：

脚本/ 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>

上述解决方案解决了向多个textareas添加项目符号的问题。

使用相同的Javascript向多个textareas添加项目符号

2 个答案: