html输入框可以自动换行,input text

The element is used to select user information.

 is single line by definition

An element can vary in many ways, depending on the type attribute. An element can be of typetext field, checkbox, password, radio button, submit button, and more.

The tag defines a multi-line text input control.

A text area can hold anunlimited number of characters, and the text renders in afixed-width font (usually Courier). The size of a text area can be specified by the cols and rows attributes, or even better; through CSS‘ height and width properties.

textarea{overflow-y:auto;padding:0;width:100px;height:100px;border:1px solid gray;}时:

全部为w:100px h:100px

这个textarea很混乱。但是设置了padding:0和border:1px solid gray后就全部都统一了。

所以强烈建议重写一下padding和border。

The wrap options are the most tricky part of text areas. If you turn wrap off the text is handled as one long sequence of text without linebreaks. If youset it to virtual the text appears on your page as if it recognized linebreaks – but when the form is submitted the linebreaks are turned off. If you set it tophysical the text is submitted exactly as it appears on the screen – linebreaks included.

如当 值长度超过5个，就实现自动换行

solution: input不能自动换行,但可以试CSS，根据宽度换行, style=”word-break:break-all”

word-break: normal|break-all|hyphenate;

Allow long words to be able to break and wrap onto the next line:

Value

Description

normal

Breaks non-CJK scripts according to their own rules

break-all

Lines may break between any two characters for non-CJK scripts

hyphenate

Words may be broken at an appropriate hyphenation point

input text换行了，你就看不到上一行了

HTML5 placeholder text

There is a new attribute as part of HTML5 forms called placeholder. It shows faded gray text in the textarea (also works for text-style inputs) which disappears when the textarea is in focus or has any value.

All WebKit browsers, Firefox 3.6, and Opera 10 all put a glowing blue border around textareas when they are in focus. You can remove it from the WebKit browsers like this:

textarea {

outline: none;

}

REMINDER: The blue glow is becoming a strong standard and breaking that standard is typically a bad thing for your users. If you do it, you should have a darn compelling reason to as well as a similarly strong :focus style.

Add resize handle

jQuery UI has a resizeable interaction that can be used on textareas. It works in all browsers and overrides the WebKit native version, because this version has all kinds of fancy stuff (like callbacks and animation).

To use it, load jQuery and jQuery UI on your page and at its most basic level you call it like this:

$("textarea").resizable();

Auto-resize to fit content

James Padolsey has a super nice jQuery script for auto resizing textareas. It works just how you likely hope it does. The textarea starts out a normal reasonable size. As you type more and more content, the textarea expands to include all of that text, rather than triggering a scrollbar as is the default.

The plugin has a variety of options, but at its simplest you just load jQuery, the plugin file, and call it like this:

$('textarea').autoResize();

Nowrap

If you want to be able to type into textareas and would rather lines do not break until you press return/enter (a horizontal scrollbar is triggered instead), you’ll have to use the wrap="off" attribute.

#whatever { white-space: nowrap; }.

Remove default scrollbars in Internet Explorer

IE puts a vertical scrollbar by default on all textareas. You can hid it with overflow: hidden, but then you don’t get any scrollbars at all when you expand. Thankfully auto overflow works to remove the scrollbar but still put them back when needed.

textarea {

overflow: auto;

}

Like this:

Like Loading...

Related