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, время: 01:35. |