noder_ss
@noder_ss
Человек хороший, вёрстка по душе

Как получить то, что написал пользователь в реальном времени??

Как сделать, чтобы то, что пользования ввел в форму уже с хостинга в реальном времени, записалось мне в папку или попало ещё каким то образом ко мне в руки? Есть вариант на js?
  • Вопрос задан
  • 135 просмотров
Решения вопроса 3
sergiks
@sergiks Куратор тега JavaScript
♬♬
WebSocket соединение – и передавайте каждое событие на input'е
Ответ написан
Okujava-script
@Okujava-script
Веб-программист с абсолютным слухом и композитор
Можно если не WebSocket, то использовать технологию ajax (fetch), которая будет периодически принимать обновлённое содержимое поля для ввода. В следующем простейшем примере будем использовать три файла на сервере:
index.html
<textarea id=txt oninput='send(this.value)'></textarea>
<script>
async function send(text){await fetch('script.php?text=' + text)};
async function get(){txt.value = await (await fetch('file.txt')).text()};
get();
setInterval(get, 5000);
txt.focus();
</script>

script.php
$text = $_GET['text'];
$file = fopen('file.txt', 'w');
fwrite($file, $text);
fclose($file);

file.txt - изначально пустой файл.
Все три файла в этом примере должны быть в одной папке.
Суть работы такова: когда каждый, у кого открыт index.html делает любое изменение содержимого textarea, все остальные, у кого он открыт, видят это изменение в режиме реального времени. Это даже можно назвать примером простейшего чата на несколько строк. Можно переделать и использовать для отслеживания в реальном времени того, что вводят в поле для ввода.

Второй вариант: всё, что вводит, исправляет и вытирает пользователь, записывается в массив, потом этот массив отправляется на сервер, от куда его можно скачать и прочитать в любое удобное время. При чтении происходит анимация, воспроизводящая запись всех действий пользователя в поле для ввода текста. Вот упрощённая рабочая схема:
<textarea id=txt cols=50 rows=10 oninput='array.push(this.value)' placeholder='введите текст:'></textarea><br /><br />
<button onclick='read()'> прочитать </button>
<button onclick='reset()'> очистить </button>
<script>
let array = [];
const read = _ => {
	let index = 0;
	let interval = setInterval(function(){
		txt.value = array[index];
		index ++;
		if(index >= array.length) clearInterval(interval);
	}, 300);
}
const reset = _ => {
	txt.value = '';
	array = [];
}
txt.focus();
</script>
Ответ написан
gluck59
@gluck59
Виртуальный глюк
Есть, и больше одного.
Повесь обработчик события onkeyup на нужный инпут и по сработке отправляй value аяксом на сервер.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы