Html textarea with scrolling

CSS create a scrollable textarea with scrolling background image

The following tutorial shows you how to use CSS to do «CSS create a scrollable textarea with scrolling background image».

CSS Style

The CSS style to do «CSS create a scrollable textarea with scrolling background image» is

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td < margin:0; padding:0; > table !-- w w w . d e m o 2 s .c o m --> border-collapse:collapse; border-spacing:0; > fieldset,img < border:0; > address,caption,cite,code,dfn,em,strong,th,var < font-style:normal; font-weight:normal; > ol,ul < list-style:none; > caption,th < text-align:left; > h1,h2,h3,h4,h5,h6 < font-size:100% font-weight:bold; > q:before,q:after < content:''; > abbr,acronym < border:0; > a img < border:none; > html < height:100%; > .outer < width:310px; height:250px; padding:5px; border:1px solid #666; -webikit-border-radius:3px; -moz-border-radius:3px; overflow:auto; overflow-x:hidden > textarea < background:#fff url('http://www.toddle.com/images/300_words_background.gif') 0 -220px no-repeat; width:302px; padding:5px; height:99em; >

HTML Body

The following iframe shows the result. You can view the full source code and open it in another tab.

html> head> meta name="viewport" content="width=device-width, initial-scale=1"> style id="compiled-css" type="text/css"> /* GLOBAL RESET SETTINGS */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td margin:0;padding:0;> table border-collapse:collapse;border-spacing:0;> fieldset,img border:0;> address,caption,cite,code,dfn,em,strong,th,var font-style:normal;font-weight:normal;> ol,ul style:none;> caption,th left;> h1,h2,h3,h4,h5,h6 font-size:100%;font-weight:bold;> q:before,q:after '';> abbr,acronym border:0;> a img border:none;> html height:100%;> .outer < width: 310px; height: 250px; padding: 5px; border: 1px solid #666; -webikit-border-radius: 3px; -moz-border-radius: 3px; overflow:auto;overflow-x:hidden > textarea!-- w w w . d e m o 2s . c o m --> background: #fff url('http://www.toddle.com/images/300_words_background.gif') 0 -220px no-repeat; width: 302px;padding:5px; height:99em; >  body> div >"outer"> textarea>     

Related

• CSS center text in a background div balloon image
• CSS center text in a background div balloon image (Demo 2)
• CSS center text with a background image
• CSS create a scrollable textarea with scrolling background image
• CSS create this type of background-image with text
• CSS create this type of background-image with text (Demo 2)
• CSS create this type of background-image with text (Demo 3)

demo2s.com | Email: | Demo Source and Support. All rights reserved.

Источник

How to scroll textarea horizontally?

Hello everyone, whenever you create a textarea it scrolls vertically basically. But in this article you will learn that how to make a textarea that will scroll horizontally with the help of css and html attributes.

style> .textarea white-space: nowrap; overflow-x:auto; overflow-y:hidden; > /style> textarea class="textarea"> This is a paragraph to make sure that the textarea is scrolling horizontally. Finally the textarea is scrolling. /textarea>

Maybe there is many methods to scroll a textarea horizontally . But I’m going to share two methods. The first method is using the css and the other using the html attribute.

Scroll a textarea horizontally using css

1. Create a textarea with a class name textarea .
2. Select the textarea with the class textarea and write the css code inside the tag
3. white-space:nowrap; The text will never wrap to the next line. The text continues on the same line until a
   tag is encountered.
4. overflow-x:auto; the auto value is similar to scroll , but it adds the scrollbars only when necessary.

style> .textarea white-space: nowrap; overflow-x:auto; overflow-y:hidden; > /style> textarea class="textarea"> This is a paragraph to make sure that the textarea is scrolling horizontally. Finally the textarea is scrolling. /textarea>

Scroll textarea content horizontally using html attribute.

In the second method, you can make a textarea that will scroll horizontally with the help of an HTML attribute name wrap=»» .

textarea wrap="off"> html> head> title>html tags/title> /head> body bgcolor="#0000ff"> h1>This is my first heading/h1> p>This is my first paragraph/p> h5>This is a paragraph to make sure that the textarea is scrolling horizontally. br> Finally the textarea is scrolling./h5> /body> /html> /textarea>

Источник

Как при вводе текста, textarea прокручивать до конца?

Имеется textarea, которая расширяется (изменяется row) с помощью js, при вводе текста.

Но при появлении прокрутки, textarea не «докручивается» до конца.

Как увидеть проблему:
В примере жмете на синий круг, затем вводите 6 строк, нажимая Enter. Можно в строке по 1 символу вводить.

PS. Почему-то не могу сюда загрузить анимированную gif-ку. ((

Upd. Дописал в пример строку:
document.getElementById(‘textArea’).scrollTop = document.getElementById(‘textArea’).scrollHeight;

Теперь при увеличении числа строк, осталось все как и было.
Но если написать еще 1 символ, то все нормализуется.
Надо еще немного допилить ))

Да просто у вас очень странные пляски с навешиванием событий.

document.getElementById('textArea').addEventListener("keydown", keyDownUpdateSize); document.getElementById('textArea').addEventListener("keyup", keyUpUpdateSize);

document.getElementById('textArea').addEventListener("input", updateSize);

И будет работать как вам надо.

Потом попробуйте вбивать текст, не отбивая его пробелом (просто зажмите символ и удивитесь, что всё сломалось).
Осознайте, что единственный адекватный способ посчитать новую, необходимую высоту textarea — это скопировать её куда-то «out of bounds» вместе с контентом и узнать scrollHeight.

Источник

Прокрутка текста в textarea

Подскажите форму подобную textarea, должна быть прокрутка и выделение значения
Здравствуйте. Подскажите пожалуйста форму. Нужно форма подобная textarea (с прокруткой если не.

Ввод текста в textarea
Здравствуйте! Имеется web-страница, на которой присутствуют несколько элементов, в числе которых.

Передача текста из textarea в правильном виде
Здравствуйте! У меня есть textarea с текстом, например: 123 456 После отправки данного.

Как изменить цвет текста в textarea
Здравствуйте, помогите плз, не как не могу поменять цает текста в textarea, пробовал <textarea.

вам надо это все обернуть в блок div и дописать ему overflow:hidden; с фиксированой шириной и высотой, потом внутри него сделать textarea с шириной больше чем у div примерно на 20px, и вот тогда скролл скроется

maximus2011, и как только текстарий переполнится текстом, тут же выдаст свои полосы прокрутки, запрещать то нужно текстарию.

Сообщение от lilubanana

Источник