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":

Как стилизовать угол textarea?

#javascript #html #jquery #css #textarea

Как изменить угол textarea отвечающий за resize?
    

Ответы

Ответ 1

Изменить - т. е. запретить resize?
Если да то вот так:


resize: none – Размеры элемента не изменяются.
resize: both – Можно изменять размеры элемента по горизонтали и вертикали.
resize: horizontal - Можно изменять размеры элемента только по горизонтали.
resize: vertical - Можно изменять размеры элемента только по вертикали.
resize: inherit - Наследует значение родителя.

Как в <textarea> сделать так, чтобы при вводе текста только первая буква в предложении была заглавной?

#html #css #textarea

        
                    
Добрый день. 

Вопрос: При вводе текста строчными буквами в  сделать так, чтобы только
первая буква в предложении была заглавной? 

Спасибо.
    
</PRE></p><br><h3>Ответы</h3><p style="text-align: left; font-size: 14px;"><PRE><h3><b>Ответ 1</b></h3><br><br>С помощью css такое может решить только атрибут autocapitalize. Проблема в том, что
это не универсальное решение. 
Поэтому такую задачу можно решить только с помощью js. Например так:



$("#someId").on('keyup', function(e) {
    var arr = $(this).val().split('.');
    var result = '';
    for (var x = 0; x < arr.length; x++) {
        result += arr[x].replace(/^\s+/, '').charAt(0).toUpperCase() + arr[x].replace(/^\s+/,
'').slice(1) + '. ';
    }
    $(this).val(result.substring(0, result.length - 2));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="someId">

Увеличение textarea по мере заполняемости - javascript

#javascript #html #textarea

Как можно увеличить textarea по мере заполняемости с помощью javascript?
    

Ответы

Ответ 1

Первый вариант: 
P.S. С помощью атрибута contenteditable



div {
  border: 1px solid;
}





Второй вариант:



var textarea = document.getElementsByTagName('textarea')[0];

textarea.addEventListener('keydown', resize);

function resize() {
  var el = this;
  setTimeout(function() {
    el.style.cssText = 'height:auto; padding:0';
    el.style.cssText = 'height:' + el.scrollHeight + 'px';
  }, 1);
}
textarea {
  width: 100%;
  resize: none;
}



Ответ 2

Пример так, для коллекции.



var textarea = document.getElementsByTagName('textarea')[0];
/*
 Чтобы получить необходимы результат и исключить костыльный подход
   с setTimeout в теле инструкции обработчика resize, его лучше повесить
   на событие input вместо keydown 
*/	
		textarea.addEventListener('input', resize);
		
		function resize(_e) {
			var event = _e || event || window.event;
			var getElement = event.target || event.srcElement;	// var el = this;
				getElement.style.height = Math.max(getElement.scrollHeight, getElement.offsetHeight)+"px"
		}
textarea {
  width: 100%;
  resize: none;
  max-height: 100px;
  -off-padding:0
}
div {
	position: relative;
	overflow: auto;
	border: 1px solid;
	max-height: 100px;
}




Ответ 3

Oдин из вариантов:



var Q;
Q = {};
Q.elem = document.querySelector('.input-0');
Q.heightPlus = 12;

var autoExpand = function() {
	Q.elem.style.height = 'inherit';
	var height = Q.elem.scrollHeight + parseInt(Q.heightPlus);
	Q.elem.style.height = height + 'px';
};

document.oninput = function() {
	autoExpand();
}

window.addEventListener('DOMContentLoaded', function() {
	autoExpand();
});
textarea {
	min-height: 5em;
	max-height: 50vh;
	width: 100%;
}



Ответ 4

Еще один из вариантов:
Плавное изменением высоты textarea по мере заполняемости...



var Q;
Q = {};
Q.inTime = 50;
Q.inPlus = 15;
Q.elem = document.querySelector('.input-0');
Q.elemTmp = document.querySelector('.input-tmp');
Q.scrollHeightInfo;
Q.scrollHeightTmp = 0;
Q.timeInterval;

window.addEventListener('DOMContentLoaded', function() {
	autoExpand();
});

document.oninput = function() {
	autoExpand();
};

var autoExpand = function() {
	Q.elemTmp.value = Q.elem.value;
	Q.elemTmp.style.height = 'inherit';
	Q.scrollHeightInfo = Q.elemTmp.scrollHeight + parseInt(Q.inPlus);
	if (Q.scrollHeightTmp === 0) {
		Q.scrollHeightTmp = Q.inPlus * 2;
		Q.elem.focus();
	} else timeIntervalStart();
};

function timeIntervalStart() {
	if (Q.scrollHeightInfo === Q.scrollHeightTmp) {
		clearTimeout(Q.timeInterval);
	}
	Q.timeInterval = setTimeout(function() {
		if (Q.scrollHeightTmp < Q.scrollHeightInfo) {
			Q.scrollHeightTmp++;
		}
		if (Q.scrollHeightTmp > Q.scrollHeightInfo) {
			Q.scrollHeightTmp--;
		}
		Q.elem.style.height = Q.scrollHeightTmp + 'px';
		timeIntervalStart();
	}, Q.inTime);
}
textarea {
	min-height: 5em;
	max-height: 50vh;
    width: 100%;
}

Перетаскивание картинок и ссылок в textarea

#javascript #jquery #drag_n_drop #textarea

Есть textarea. Если перетащить в нее картинку или ссылку, то в том месте, где отпустим
мышь появится выделенный полный путь.




something text

link




Как вмешаться в этот процесс, получить этот путь и видоизменить его, например обернуть
в скобки перед вставкой?

При этом важно, чтобы он вставлялся именно туда, куда его «дропаешь», а не в конец
textarea и НЕ хочется использовать jQuery.UI
    

Ответы

Ответ 1

/*
  Получение информации об объекте перетаскивания и
  использование её для вставки в текстовое поле.
  No JQ. JS only.
*/

var oTextarea = document.querySelector('#text');
var sOriginalText, sInsertText;

document.addEventListener('dragstart', function(event) {
  // Запоминаем исходный текст "textarea"
  sOriginalText = oTextarea.value;
  // Получаем от захваченного элемента данные
  // (здесь можно вносить нужные изменения и получить 
  // различную информацию об объекте перетаскивания)
  sInsertedText = event.target.outerHTML || window.getSelection().toString();
  // Проверка на перетаскивание текста внутри "textarea"
  if (event.target == oTextarea) {
    sInsertedText = window.getSelection().toString();
  }
});

document.addEventListener('drop', function(event) {
  let data = event.dataTransfer.items;
  for (let i = 0; i < data.length; i++) {
    if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) {
      data[i].getAsString(function(str) {
        // Получаем изменённый текст "textarea"
        let sChangedText = oTextarea.value;
        // Получаем длину изменённого текста
        let nChangedLen = sChangedText.length;
        // Получаем длину исходного текста
        let nOriginalLen = sOriginalText.length;
        // Позиция каретки
        let nCarretPos;
        // Ищем изменения одновременно...
        for (let i = 0; i < nOriginalLen; i++) {
          // ... с начала
          if (sChangedText[i] != sOriginalText[i]) {
            nCarretPos = i;
            break;
          }
          // ...и с конца
          if (sChangedText[nChangedLen - 1 - i] != sOriginalText[nOriginalLen - 1
- i]) {
            nCarretPos = nOriginalLen - i;
            break;
          }
        }

        // (Здесь любые манипуляции с sInsertedText: replace и т.п.)

        // Заносим готовый текст в "textarea"
        oTextarea.value = sOriginalText.substring(0, nCarretPos) +
          sInsertedText +
          sOriginalText.substring(nCarretPos);
        // Выделяем изменения
        oTextarea.focus();
        oTextarea.setSelectionRange(
          // (Если приплюсовать длину, то каретка встанет в конец вставки, ничего
не выделяя)
          nCarretPos,
          // (Если не плюсовать длину, то каретка встанет в начало вставки, ничего
не выделяя)
          nCarretPos + sInsertedText.length
        );
      });
    }
  }
});
// Сброс (для удобства демо)
var sSourceText = oTextarea.value;
document.querySelector('button').addEventListener('click', function() {
  oTextarea.value = sSourceText;
});
Если убрать из скрипта "setSelectionRange", то каретка,
после вставки, будет помещена в самый конец всего текста.

Ссылка Просто текст 

guitar tab creator

Здравствуйте. Пытаюсь создать что-то похожее на редактор гитарной табулатуры. Проблема в том, что при попытке ввода с клавиатуры в 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":

Увеличение textarea по мере заполняемости - javascript

Как можно увеличить textarea по мере заполняемости с помощью javascript?

Ответ

Первый вариант: P.S. С помощью атрибута contenteditable
div { border: 1px solid; }

Второй вариант:
var textarea = document.getElementsByTagName('textarea')[0]; textarea.addEventListener('keydown', resize); function resize() { var el = this; setTimeout(function() { el.style.cssText = 'height:auto; padding:0'; el.style.cssText = 'height:' + el.scrollHeight + 'px'; }, 1); } textarea { width: 100%; resize: none; }