HTML/JAVASCRIPT: отключить HTML CONTENT в contentEditable = true

Что я хочу?HTML/JAVASCRIPT: отключить HTML CONTENT в contentEditable = true

Я хочу ДИВ, что работает как textarea, я не хочу, чтобы иметь возможность редактировать вещи в DIV и вставить изображения и так далее просто обычный текст.

Пример

www.facebook.com - лучший пример новость Facebook, корма.

Зачем мне это нужно?

Если проверить ленту новостей facebook, вы также видите, что область, где вы можете написать свой пост, расширяет как вы пишете свой пост или ударил много из заносит.

Это по той же причине, почему я хочу использовать div с contentEditable, потому что в textarea я не могу этого сделать. #

ПОЖАЛУЙСТА НЕТ Jquery только JAVASCRIPT

источник

2010-07-27 Adam

Почему вы не можете просто использовать текстовое поле? –

Хорошо, я вижу ваше редактирование, но почему вы не можете использовать расширяющуюся текстовую область? –

Umm Не знаю: D – Adam

Resizable Textarea с использованием чистого JavaScript без рамок:

<html> 
    <head> 
     <script> 
      function taOnInput() 
      { 
       var dis = this; 
       setTimeout(
        function(){ 
         var span = document.createElement("div"); 
         span.innerHTML = escape(dis.value).replace(/[%]0A/g, "<br/>")+"<br/>."; //Extra BR for padding... TextArea uses %0A, not \n 
         span.style.width = dis.offsetWidth+"px"; 
         span.style.padding = "0px"; 
         span.style.fontFamily = "Lucida Console"; 
         document.body.appendChild(span); //Offset height doesnt work when not in DOM tree i guess =/? or is it a hack 
         dis.style.height = span.offsetHeight+"px"; 
         document.body.removeChild(span); 
        }, 1 
       ); //setTimeout=hack, since oKP is called BEFORE character append. 
      } 
      window.onload = function() 
      { 
       var resizableTA = document.getElementById("resizableTA"); 
       resizableTA.onkeypress = taOnInput; 
      } 
     </script> 
     <title>ItzWarty - Untitled Document</title> 
    </head> 
    <body> 
     <textarea id="resizableTA">Trololololol</textarea> 
    </body> 
</html>

Очень хака, положил его вместе менее чем за 10 минут. Надеюсь, это по крайней мере даст вам представление.

протестирован только на Google Chrome 5.0.308.0

Объяснение кода, так как я не в состоянии на комментирование
1) перед window.onload, текстовое поле из идентификатора «resizableTA» был создан и добавлен к документу .body дерева DOM.
2) window.onload прикрепляет обработчик событий, taOnInput [textarea на входе].
3) textarea на входе создает фиктивный интервал, заставляет его ширину шириной textarea и шрифтом для «Lucida Console», который AFAIK является шрифтом по умолчанию для текстовых полей, копирует значение текстового поля в innerHTML, при замене% 0A [новая строка, используемая для использования в текстовых средах] с
[line break] ...
4) offset offsetHeight - это высота пролета, который теперь можно использовать для увеличения высоты текстового поля.

Может ли кто-нибудь подтвердить, что Lucida Console является шрифтом по умолчанию для textarea? Это Консола? Новый Курьер? Я предположил, что любой шрифт с фиксированной шириной будет работать. Я не использую Mac, поэтому я не знаю, какие шрифты он разделяет с окнами, хотя я думаю, что Courier New - лучший выбор ...

источник

2010-07-27 08:16:09 Warty

Спасибо ItzWarty, я работаю в настоящее время на своем собственном скрипте, и он отлично работает с некоторыми ошибками, новая строка еще не работает, но я нахожусь в этом, чтобы исправить это. Проблема с этим скриптом - это 'setTimeout', он будет есть мой сервер, как я знаю. Я сделал это с 'onkeyup'. – Adam

Ешьте свой сервер? o.o? Код запускается на стороне клиента. setTimeout просто планирует запуск функции почти сразу, если не сразу, после нажатия клавиши onkeypress ... – Warty

Как насчет TEXTAREA элемента?

Вы можете настроить его, чтобы посмотреть, как вам нравится.

источник

2010-07-27 05:59:08 thomasrutter

Я отредактировал свой вопрос. – Adam

Если вы хотите только расширить, вы можете try this.

источник

2010-07-27 06:10:23 Reigel

Я не хочу использовать jQuery. Однако спасибо за наконечник. – Adam

так просто чистый javascript? – Reigel

yes, just pure javascript – Adam

Вам не обязательно использовать DIV. Вы все равно можете иметь текстовое поле и расширять его, когда это необходимо.

Вот плагин JQuery, который делает только что: http://plugins.jquery.com/project/TextAreaResizer

Вот дем: http://www.itsavesyou.com/TextArea_Resizer_example.htm

источник

2010-07-27 06:28:07

HTML/JAVASCRIPT: отключить HTML CONTENT в contentEditable = true

ответ

Смежные вопросы