Превью textarea в отдельном блоке
В общем ситуация такая: есть php форма заполнения информации о себе. Как сделать, чтобы заполняя поле textarea одновременно выводился этот же текст в другом блоке? Вот сама строчка:
<textarea rows="5" cols="53" class="medium" name="text" id="text" onKeyUp="check_len(\'text\', 75)'.$text.'"></textarea> P.S. В php новичок, помогите кто знает. |
Цитата:
Цитата:
Цитата:
 |
php - это серверный язык. Файл php запускается и исполняется НА СЕРВЕРЕ, он не может организовать какую-либо динамику на самой странице. Он может только динамически создавать страницы и работать с файлами на сервере.
Для организации динамики на уже загруженной пользователем странице используется javascript, который является клиентским языком программирования. Конкретно в этом случае нужно на элемент textarea повесить обработчик события keydown (событие keydown срабатывает при нажатии клавиши), приравнивающий содержание нужного блока к содержанию textarea. Показываю.
<!DOCTYPE html>
<html>
<head>
<title>Я - тестовая страница</title>
</head>
<body>
<textarea rows="5" cols="53" class="medium" name="text" id="text" onKeyUp="check_len(\'text\', 75)'.$text.'" onkeydown="document.getElementById('div_with_text').innerHTML = this.value"></textarea>
<div id="div_with_text"></div>
</body>
</html>
|
Спасибо, а не знаете как сделать чтобы одинаково написанный текст отображался без запоздания на один символ?
|
Цитата:
<textarea rows="5" cols="53" class="medium" name="text" id="text" onkeyup="document.getElementById('div_with_text').innerHTML = this.value"></textarea>
<div id="div_with_text"></div>
|
Использовать innerHTML не очень безопасно - юзер может всю верстку поломать пока набирает текст.
<textarea rows="5" cols="53" class="medium" name="text" id="text" ></textarea>
<div id="div_with_text"></div>
<script>
(function(){
var input = document.getElementById('text');
var preview = document.getElementById('div_with_text');
preview.style.whiteSpace = 'pre';
input['oninput' in input ? 'oninput' : 'onpropertychange'] = function() {
preview['innerText' in preview ? 'innerText' : 'textContent'] = input.value;
};
})();
</script>
|
Спасибо большое! Вы мне очень помогли.
|
| Часовой пояс GMT +3, время: 20:29. |