Здравствуйте. Пытаюсь создать что-то похожее на редактор гитарной табулатуры. Проблема в том, что при попытке ввода с клавиатуры в textarea, она перестает реагировать на нажатие кнопок вообще. Код:
$(document).ready(function(){
var e =" E | ",
a =" A | ",
d =" D | ",
g =" G | ",
z = "
",
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 жутко ограничены.
Ответ
Использовать .text() для полей ввода не рекомендуется, измените на .val(), всё будет работать.
А вот для DIVа .text() самое то и, наверное, даже правильнее .html(), хотя в конкретно этом случае без разницы.
$(document).ready(function(){
var e =" E | ",
a =" A | ",
d =" D | ",
g =" G | ",
z = "
",
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":
Комментариев нет:
Отправить комментарий