HTML / JAVASCRIPT: отключить HTML CONTENT в contentEditable = true - PullRequest
Новая
       42

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

3 голосов
/ 27 июля 2010

Что я хочу?

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

Пример

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

Зачем мне этот путь?

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

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

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

Ответы [ 4 ]

3 голосов
/ 27 июля 2010

Изменяемый размер 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, текстовая область id "resizableTA" была создана и добавлена ​​к document.body дерева DOM.
2) window.onload присоединяет обработчик событий, taOnInput [textarea on input].
3) textarea при вводе создает фиктивный интервал, переводит его ширину в ширину текстовой области и стиля шрифта в «Lucida Console», где AFAIK является шрифтом по умолчанию для textareas, копирует значение текстовой области в innerHTML диапазона, заменяя%0A [новая строка, которую используют textareas] с[разрыв строки] ...
4) offset_hight диапазона - это высота диапазона, который теперь можно использовать для принудительного определения высоты текстовой области.

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

0 голосов
/ 27 июля 2010

Если вы хотите только расширение, вы можете попробовать это .

0 голосов
/ 27 июля 2010

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

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

Вот демоверсия: http://www.itsavesyou.com/TextArea_Resizer_example.htm

0 голосов
/ 27 июля 2010

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

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

...