CODEWITHSUNDEEP
jqueryhtmlcss
jrhicks
jrhicks

Reputation: 14997

Have textarea act as an Input

How can I apply style and javascript to a textarea field to get it to act like an input textfield?

I have some input textfields that I want to capture pastes with newline characters. To achieve this I converted the input textfields to textareas. It would be nice however if the textarea input looked and acted like a input field.

I've determined how to size the textarea to look like an input, but there are other subtle differences all of which I haven't inventoried. I'm looking for a library or comprehensive way to have textarea act like textfield.

Thank you

Update

I'm going to leave the text fields alone. It turns out I can just create a hidden textarea and switch focus to that element on paste events to grab multiline pasted data.

Upvotes: 2

Views: 2481

Answers (4)

jrhicks
jrhicks

Reputation: 14997

So far I've found the follow style html and css useful.

textarea {
    overflow: hidden;
    resize: none;
}

<textarea rows=1 wrap=Off></textarea>

Upvotes: 2

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76910

You could do:

textarea{
 width: 10em;  
    height:1.2em;

}

for the style

Upvotes: -1

jdross
jdross

Reputation: 1206

You can capture the data like this

$("#textarea1").val()

Upvotes: 1

ayyp
ayyp

Reputation: 6618

To get it to look like an input field you'd need to change the length and width of it to be the proper size. Other than that the two look rather similar. As for the JavaScript, it would be similar to what you're already using for the inputs.

Upvotes: 1

Related Questions