Форум

savsoft · #1 (**permalink**) 18.05.2020, 03:03

Есть форма с несколькими полями, 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 срабатывает, но как получить перетягиваемое значение, изменить его и вставить в поле?

savsoft · #2 (**permalink**) 18.05.2020, 13:18

Методом научного тыка получилось так

$(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);
					
				}
			});
		});

В хроме и мазиле работает, что мне нужно. Что можно и нужно заменить/улучшить? Спасибо.

laimas · #3 (**permalink**) 18.05.2020, 13:35

Блок else можно выбросить, все равно работать не будет.
Вырезать лишние пробелы, это значит 2 и более /\s{2,}/
Чтобы получить значение элемента прибегать к JQ не обязательно - this.value

savsoft · #4 (**permalink**) 18.05.2020, 14:00

Сообщение от laimas

Блок else можно выбросить, все равно работать не будет.
Вырезать лишние пробелы, это значит 2 и более /\s{2,}/
Чтобы получить значение элемента прибегать к JQ не обязательно - this.value

Но блок else работает. Делает все что нужно при перетягивании.

laimas · #5 (**permalink**) 18.05.2020, 14:11

Сообщение от savsoft

Но блок else работает.

Даже так?! Каким образом если e.originalEvent присутствует, а event не определено?
Если бы и было определено, то зачем 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>

Выделяйте текст, перемещайте, копируйте и вставляйте. Вот это и работает.

savsoft · #6 (**permalink**) 18.05.2020, 14:23

Сообщение от laimas

Даже так?! Каким образом если e.originalEvent присутствует, а event не определено?
Если бы и было определено, то зачем event.preventDefault();?

В хроме без event.preventDefault() перетаскивалось старое значение, а в мозиле нет. Поэтому добавил. А потом просто по id вставлял новое значение. Сначала я хотел изменить перетаскиваемое значение, но у меня не получилось. Точнее не получилось использовать event.dataTransfer.setData Получилось только получить значение, обработать и потом просто вставить. С вашим примером буду разбираться, я пробовал через input, но у меня не заработало. Поэтому потом стал мудрить. Спасибо.

Форум

Справочник

Discord чат

Курсы javascript