guitar tab creator

#javascript #jquery #textarea

Здравствуйте. Пытаюсь создать что-то похожее на редактор гитарной табулатуры. Проблема
в том, что при попытке ввода с клавиатуры в textarea, она перестает реагировать на
нажатие кнопок вообще. Код:



$(document).ready(function(){
    var e =" E | ",
        a =" A | ",
        d =" D | ",
        g =" G | ",
        z = "\n",
        tabby = $("#tab"),
        leng = $("#leng"),
        main = "",
        now = e + z + a + z + d + z + g + z;
    tabby.text(main + z + now);


    $("#bb").click(function(){
        e += "--";
        a += "-2";
        d += "--";
        g += "--";
        now = e + z + a + z + d + z + g + z ;
        tabby.text(main + z + now);
        leng.html(now.length);

        if (now.length >= 184) {
            main += z + now;
            e =" E | ";
            a =" A | ";
            d =" D | ";
            g =" G | ";
            now = e + z + a + z + d + z + g + z;
            tabby.text(main + z + now);
        }
    });

    $("#abb").click(function(){
        e += "---";
        a += "---";
        d += "---";
        g += "-10";
        now = e + z + a + z + d + z + g + z ;
        tabby.text(main + z + now);
        leng.html(now.length);

        if (now.length >= 184) {
            main += z + now;
            e =" E | ";
            a =" A | ";
            d =" D | ";
            g =" G | ";
            now = e + z + a + z + d + z + g + z;
            tabby.text(main + z + now);
        }
    });
});
#tab {
  width: 80%;
  height: 200px;
  background: #999;
  display: block;
  margin: 0 auto;
  font-size: 15px;
}
p {
  display: inline-block;
  width: 10px;
  margin: 0px;
  padding: 7px;
}
button {
  display: inline-block;
  width: 100px;
  height: 50px;
  margin: 15px auto;
}
#buttons {
  width: 245px;
  height: auto;
  margin: 0 auto;
}
#leng {
  display: block;
  width: 100%;
  height: 40px;
  margin: 0 auto;
  font-size: 40px;
}



  
  
  






Как это исправить?

З.Ы. Прошу прощения за код. Мои знания js/jquery жутко ограничены.
    

Ответы

Ответ 1

Использовать .text() для полей ввода не рекомендуется, измените на .val(), всё будет
работать.
А вот для DIVа .text() самое то и, наверное, даже правильнее .html(), хотя в конкретно
этом случае без разницы.

$(document).ready(function(){
    var e =" E | ",
        a =" A | ",
        d =" D | ",
        g =" G | ",
        z = "\n",
        tabby = $("#tab"),
        leng = $("#leng"),
        main = "",
        now = e + z + a + z + d + z + g + z;
    tabby.val(main + z + now);


    $("#bb").click(function(){
        e += "--";
        a += "-2";
        d += "--";
        g += "--";
        now = e + z + a + z + d + z + g + z ;
        tabby.val(main + z + now);
        leng.text(now.length);

        if (now.length >= 184) {
            main += z + now;
            e =" E | ";
            a =" A | ";
            d =" D | ";
            g =" G | ";
            now = e + z + a + z + d + z + g + z;
            tabby.val(main + z + now);
        }
    });

    $("#abb").click(function(){
        e += "---";
        a += "---";
        d += "---";
        g += "-10";
        now = e + z + a + z + d + z + g + z ;
        tabby.val(main + z + now);
        leng.text(now.length);

        if (now.length >= 184) {
            main += z + now;
            e =" E | ";
            a =" A | ";
            d =" D | ";
            g =" G | ";
            now = e + z + a + z + d + z + g + z;
            tabby.val(main + z + now);
        }
    });
}); 


Чтобы вообще ничего нельзя было вводить в textarea, добавьте в тег "readonly":