Каков правильный синтаксис jQuery для того, чтобы функция, относящаяся к одному входу, применялась ко всем входам?

Это постоянная проблема, связанная с моим вопросом [ЗДЕСЬ], если вам нужна небольшая предыстория.

Я начинающий и заинтересованный в себе веб-кодировщик, который хочет поместить функции в jQuery, чтобы заставить функции работать в любом сфокусированном вводе/элементе.

Я начал здесь с трех функций, которые работали, но только на <textarea>: id="dataInput_0".

<textarea
    data-id="0"
    class="classOne classTwo"
    id="dataInput_0"
    name="xInput_row_1"
        onFocus="functionOne();"
        onBlur="functionTwo();"
        onKeyUp="functionThree();">
</textarea>

Я спросил и получил хорошие советы и информацию о том, как использовать прослушиватели jQuery, которые будут применять функции к любым <textarea> ячейкам с заданным классом. Однако я мог только понять, как применять функции фокусировки и размытия, как здесь:

<script type="text/javascript">
$(document).ready(function(){
    $('.classOne').keypress(function(e){
        if (e.which == 13) 
        {
            alert ( "message-return key not allowed");
            return false;
        }
    });
    $('.classOne').focus(function() {
        var d = this;
            d.className = d.className + " InFocus";
   });
    $('.classOne').blur(function() {
        var d = this;
            d.className = "classOne";
   });
})
</script>

И код <textarea> теперь такой:

<textarea
    data-id="0"
    class="classOne classTwo"
    id="dataInput_0"
    name="xInput_row_1"
        onKeyUp="functionThree();">
</textarea>

functionThree() - это сумка с трюками. Из-за моего ограниченного (отсутствующего?) понимания синтаксиса у меня возникают проблемы с перемещением функции javaScript в jQuery.

Функция javaScript связана с идентификацией разделителей и разделением данных, скопированных из Excel, которые затем вставляются во множество <textarea>s.

Код:

<script type="text/javascript">
     function functionThree() {
        var x = document.forms["formName"]["dataInput_0"].value;
        if (x.indexOf('\t') > 0 && x.indexOf('\n') > 0) {
        alert ("Can't paste rows & Columns in blocks, blah, blah, blah message");
        document.forms["formName"]["dataInput_0"].value = "";
        return false;
        }
        else 
         if (x.indexOf('\t') > 0) {
             var delimiterT = x.split('\t');
             for (var i = 0; i < delimiterT.length ; i++)
                document.getElementById("dataInput_" + i).value = (delimiterT[i]);
         }
         else
             if (x.indexOf('\n') > 0) {
                 var delimiterN = x.split('\n');
                 var j = 0;
                 for (var i = 0; i < delimiterN.length ; i++) {

                     document.getElementById("dataInput_" + j).value = (delimiterN[i]);
                     j += 4;
                 }
             }
             else
                 return false;
     }
</script>

j += 4; было потому, что я предполагал пример формы с 4 столбцами. Если бы у меня было 24 столбца, очевидно, мне было бы j += 24;, чтобы перейти к следующему <textarea> под выделенным столбцом.

Таким образом, приведенный выше javaScript работает только для ["dataInput_0"], и я хочу, чтобы он работал для любого сфокусированного <textarea>.

Каким может быть правильный синтаксис jQuery?

Заранее спасибо!


person brian-welch    schedule 21.04.2013    source источник
comment
Кроме того, $(this).addClass("InFocus"); — это все, что вам нужно в вашем обработчике фокуса; $(this).removeClass("InFocus"); — это все, что вам нужно в вашем обработчике размытия. Но я бы предложил удалить код этих обработчиков из этого вопроса, потому что они работают и не связаны с проблемой, о которой вы на самом деле спрашиваете. Также обратите внимание, что indexOf() возвращает -1, если указанная строка не найдена.   -  person nnnnnn    schedule 21.04.2013


Ответы (1)


вы можете связать обработчик события keyup аналогичным образом, но в вашей функцииThree просто используйте $(this).val() для получения значения textarea. имея jquery, вы также можете избавиться от всех этих getElementById

$('.classOne').on({ 
keypress: function(){...},
focus: function(){...},
blur: function(){...},
keyup:function(){
var x = $(this).val();
    if (x.indexOf('\t') > 0 && x.indexOf('\n') > 0) {
    alert ("Can't paste rows & Columns in blocks, blah, blah, blah message");
    $(this).val("");
    return false;
    }
    else 
     if (x.indexOf('\t') > 0) {
         var delimiterT = x.split('\t');
         for (var i = 0; i < delimiterT.length ; i++)
            $("#dataInput_" + i).val(delimiterT[i]);
     }
     else
         if (x.indexOf('\n') > 0) {
             var delimiterN = x.split('\n');
             var j = 0;
             for (var i = 0; i < delimiterN.length ; i++) {

                 $("#dataInput_" + j).val(delimiterN[i]);
                 j += 4;
             }
         }
         else
             return false;
}
})
person paulitto    schedule 21.04.2013
comment
Спасибо @paulitto, я еще не совсем там. решение и синтаксис, которые вы предоставили, были отличными, но они работают только из того, что я вижу, если вставлю #dataInput_0. Мне становится теплее с этим: else if (x.indexOf('\t') > 0) { var delimiterT = x.split('\t'); var di = $(this).attr('data-id'); for (var i = 0; i <= delimiterT.length ; i++) $("#dataInput_" + di[i]).val(delimiterT[i]); - person brian-welch; 21.04.2013