Добавление маркеров в несколько текстовых областей с одинаковым Javascript

Я нашел код ниже, чтобы добавить маркерные точки в текстовое поле, и он отлично подходит для одного текстового поля.Добавление маркеров в несколько текстовых областей с одинаковым 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>

Однако, я не могу понять, как создать подобную функцию, что я могу использовать его на нескольких прокручиваемым.

Мне хотелось бы что-то, где я могу пройти через идентификатор скрытого ввода, поэтому я могу указать тот способ ввода, на который нужно добавить маркеры, но не может получить рабочее решение.

Предложения/решения приветствуются.

источник

2016-04-28 JellyTots

Получить список всех прокручиваемые и добавить слушатель событий

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

Вы можете использовать любой селектор CSS3, чтобы получить желаемые текстовые области.

В соответствии с вашими изменениями: Вы можете группировать элементы вместе, чтобы вы могли получить к ним доступ в виде группы. Теперь вы можете использовать вход так, как вам нравится.

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

источник

2016-04-28 08:23:31 DrColossos

Я добавил вышеприведенное предложение к моему коду, но проблема в том, как я передаю идентификатор скрытого элемента этому методу. Я не могу понять это, поскольку функция OnInput написана на основе идентификатора скрытого ввода, являющегося «prevLen», но мне нужно было бы использовать этот метод для нескольких скрытых элементов. – JellyTots

@JellyTots Основной, нефункциональный пример в моем редактировании – DrColossos

Решение моего запроса/вопроса:

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>

выше решение решает вопрос о добавлении пули в несколько текстовых областей.

источник

2016-04-28 09:56:30 JellyTots

Добавление маркеров в несколько текстовых областей с одинаковым Javascript

ответ

Смежные вопросы