Drag & drop - изменить значение
Есть форма с несколькими полями, input и textarea. По сути это вопросы/примечания и варианты ответов для тестов. В данный момент все набрано в ворде. Чтобы не копировать каждый ответ, а их четыре варианта, копируют все за раз в поле примечания, а потом копируют часть (один вариант ответа) и вставляют в нужное поле. Для удобства при вставке сразу удаляю начальные и концевые пробелы, более одного пробела и перенос строк. Вот код
<script>
$(function() {
$(document).on('input', 'input, textarea', function(e){
if (e.originalEvent.inputType == 'insertFromPaste') {
var new_text = $(this).val().replace(/\s\s+/g, ' ').trim();
$(this).val(new_text);
}
});
});
</script>
Все работало пока не озадачили вводом материалов еще одного препода, который ответ не выделяет/копи/пасте, а выделяет/драг/дроп. Добавил функцию
<script>
$(function() {
$(document).on('drop', 'input, textarea', function(e){
alert('!!!');
});
});
</script>
alert срабатывает, но как получить перетягиваемое значение, изменить его и вставить в поле? |
Методом научного тыка получилось так
$(function() {
$(document).on('input drop', 'input, textarea', function(e){
if (e.originalEvent.inputType == 'insertFromPaste') {
var new_text = $(this).val().replace(/\s\s+/g, ' ').trim();
$(this).val(new_text);
} else {
event.preventDefault();
var new_text = event.dataTransfer.getData("Text").replace(/\s\s+/g, ' ').trim();
$(this).val(new_text);
}
});
});
В хроме и мазиле работает, что мне нужно. Что можно и нужно заменить/улучшить? Спасибо. |
Блок else можно выбросить, все равно работать не будет.
Вырезать лишние пробелы, это значит 2 и более /\s{2,}/ Чтобы получить значение элемента прибегать к JQ не обязательно - this.value |
Цитата:
|
Цитата:
Если бы и было определено, то зачем event.preventDefault();?
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
</style>
<script type="text/javascript">
$(function() {
$('#t').on('input', function() {
$('#d').text(this.value)
})
});
</script>
</head>
<body>
<p>Text text text</p>
<textarea id="t" style="width:300px;height:50px;"></textarea>
<div id="d"></div>
</body>
</html>
Выделяйте текст, перемещайте, копируйте и вставляйте. Вот это и работает. |
Цитата:
|
| Часовой пояс GMT +3, время: 10:13. |