Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.09.2013, 19:26
Новичок на форуме
Отправить личное сообщение для Undrew Посмотреть профиль Найти все сообщения от Undrew
 
Регистрация: 30.09.2013
Сообщений: 4

Превью textarea в отдельном блоке
В общем ситуация такая: есть php форма заполнения информации о себе. Как сделать, чтобы заполняя поле textarea одновременно выводился этот же текст в другом блоке? Вот сама строчка:
<textarea rows="5" cols="53" class="medium" name="text" id="text" onKeyUp="check_len(\'text\', 75)'.$text.'"></textarea>

P.S.
В php новичок, помогите кто знает.
Ответить с цитированием
  #2 (permalink)  
Старый 30.09.2013, 21:40
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Undrew
есть php форма
Эт че еще такое?
Сообщение от Undrew
Как сделать, чтобы заполняя поле textarea одновременно выводился этот же текст в другом блоке?
Слушай событие input (для IE8 - propertychange) и в обработчике события обновляй превью.
Сообщение от Undrew
В php новичок, помогите кто знает.
А причем тут php? И вобще, это форум JS, а не PHP если ты не заметил.

__________________
В личку только с интересными предложениями
Ответить с цитированием
  #3 (permalink)  
Старый 01.10.2013, 16:25
Аватар для Erolast
Профессор
Отправить личное сообщение для Erolast Посмотреть профиль Найти все сообщения от Erolast
 
Регистрация: 24.09.2013
Сообщений: 1,436

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>

Последний раз редактировалось Erolast, 01.10.2013 в 16:29.
Ответить с цитированием
  #4 (permalink)  
Старый 03.10.2013, 15:46
Новичок на форуме
Отправить личное сообщение для Undrew Посмотреть профиль Найти все сообщения от Undrew
 
Регистрация: 30.09.2013
Сообщений: 4

Спасибо, а не знаете как сделать чтобы одинаково написанный текст отображался без запоздания на один символ?
Ответить с цитированием
  #5 (permalink)  
Старый 03.10.2013, 19:53
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Сообщение от Undrew
как сделать чтобы одинаково написанный текст отображался без запоздания на один символ?
<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>
Ответить с цитированием
  #6 (permalink)  
Старый 03.10.2013, 20:05
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Использовать 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>
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #7 (permalink)  
Старый 04.10.2013, 18:16
Новичок на форуме
Отправить личное сообщение для Undrew Посмотреть профиль Найти все сообщения от Undrew
 
Регистрация: 30.09.2013
Сообщений: 4

Спасибо большое! Вы мне очень помогли.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Две функции в блоке <div> Helly Элементы интерфейса 3 12.04.2013 11:51
Растягивание textarea - заполнение доступной высоты в окне danik.js ExtJS 8 19.08.2012 13:43
обновить textarea wp2 Events/DOM/Window 6 03.02.2012 23:44
bbcodes вставляются в чужой textarea foreach Events/DOM/Window 2 30.01.2012 21:15
Resize textarea, в копилку. Robox jQuery 0 17.01.2011 18:05