Html input multiline css

multi-line capable via CSS

No, sorry. is single line by definition. See the W3C document Forms in HTML Documents:

text Creates a single-line text input control. 

Using Dojo’s Dijit TextArea form control, based off TextArea, you can have an input field which begins as a single line and expands as the user adds to it.

You can’t do what you want with CSS alone, but you could use JavaScript to prevent the user from entering line breaks in a field.

He wants an input that wraps. That sounds like a textarea to me. He just didn’t want the user to be able to enter line breaks, which you could do with JavaScript.

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 you set 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 to physical the text is submitted exactly as it appears on the screen — linebreaks included.

Your best bet is use a textarea (with autogrow capabilities if you like), and then strip out the new lines when the form is submitted. Using php it would be something like this:

$text = str_replace(array("\n","\r"),'',$_POST['text_field']); 

This would have the desired effect of blocking newline characters. As others have pointed out it’s not really possible to get multi-line input in an input field.

Источник

How to Create a Multi-Line Text Input Field In HTML

Next, see examples of adding a multi-line text area with a «submit» button.

Example of creating a multi-line input field:

html> html> head> title>Title of the document title> head> body> form action="/form/submit" method="GET"> textarea rows="5" cols="60" name="text" placeholder="Enter text"> textarea> br/> input type="submit" value="submit"/> form> body> html>

You can also create a label for the textarea using the tag:

html> html> head> title>Title of the document title> head> body> form action="/form/submit" method="post"> label for="text">Add Comments: label> br> textarea id="text" name="text" rows="12" cols="50"> textarea> br/> input type="submit" value="Submit"> form> body> html>

Источник

How to create an input field (HTML) that spans two lines

I want to be able to use an field type of control but allow only two lines. At the moment I am using two fields but was wondering if anyone can come up with a solution to allow input (similar to a textarea) but no more than two lines. I control the width etc of the field. For reference, Jquery and Bootstrap 3 are loaded. Any help much appreciated.

4 Answers 4

var element = document.getElementById('tworows'); make2Lines(element); function make2Lines(el)< el.setAttribute('rows', 2); // limit height to 2 rows // el.setAttribute('wrap', 'off'); // ensure no softwrap is not required anymore if we limit the length el.addEventListener('keydown', limit); // add listener everytime a key is pressed function limit(e)< if(e.keyCode == 13 && this.value.indexOf('\n')>-1) < // 13 is the ENTER key and \n is the value it make in the textarea // so if we already have a line break and it's the ENTER key, we prevent it e.preventDefault(); >// async to let the dom update before changin the value setTimeout(limitRow.bind(this), 0); > function limitRow() < var maxLength = 10; var rows = this.value.split('\n'); rows.forEach(cutOverflow) this.value = rows.join('\n'); function cutOverflow(row, index, rows) < rows[index] = row.substring(0, maxLength); // this if is only if you want to automatically jump to the next line if (index === 0 && row.length >maxLength) rows[1] = row.substring(maxLength) + (rows[1] || ''); > > >

Great answer zeacho. Now if there was only a way to limit the number of characters to those that fit in the width of the textarea that would be awesome. 🙂

Источник

Create a Multi-line text input control in HTML and CSS

The following code shows how to create a Multi-line text input control.

Example

 !--from w w w .j av a2 s . c om--> html> body> form action="" method="post"> Please tell us what you think of the site and then click submit:br /> textarea name="txtFeedback" rows="20" cols="50"> Enter your feedback here. br /> input type="submit" value="Submit" />   

The code above generates the following result.

Источник

How to make a tag multi line?

No, not unless you turn it into a textarea somehow. You could do that relatively easily with jQuery, though.

3 Answers 3

will always only be one line; You cannot force a multiple line behavior with CSS or JavaScript. You will need to use a instead of a .

You could use jQuery and it’s .replaceWith() method to replace the targeted with a . however this has obvious caveats, such as those who visit your page without JavaScript on.

Not without some pretty hefty Javascript, Textarea is the only multi-line text input that I know of.

Something like this might work with jQuery:

var textArea = jQuery('').attr(); jQuery('#uxMessage').replaceWith(textArea); 

for the fields i wanted multiline, i set the input type=»textarea».

then, i’ve run the following script at end of body:

it may not work, so selecting by a class should be better. it doesn’t work with jquery slim.

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.27.43548

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник