CODEWITHSUNDEEP
html
VasileF
VasileF

Reputation: 2916

Textarea with maximum one row

Is it possible to have a textarea in HTML with a single line that never wraps to a 2nd line? I'd like to behave pretty much like an input.

I've tried :

<textarea class="compact" rows="1" wrap="soft"> </textarea>

.compact{
    resize: none;
    line-height: 20px;
    height: 20px;
    overflow: hidden;
    white-space: nowrap;
}

Why am I not using an input actually? Mostly because of the IE 10 compatibility and requirement to copy-paste text in the control. If the pasted text contains \r\n, IE 10 will simply trim any other characters after \r\n and paste that result in the input.

For example, the text

1

2

3

will be pasted as 1 without the rest of the text.

Upvotes: 2

Views: 5095

Answers (4)

Morten OC
Morten OC

Reputation: 1784

You can use contenteditable attribute on a div. Its widely supported in old browsers http://caniuse.com/#search=contenteditable

I created a small fiddle here: http://jsfiddle.net/wr14yLh5/

Html

<div contenteditable></div>

Css

div{
    background: green;
    color: #fff;
}

div br{
    display: none;
}

JS

$("div").keypress(function(e){ return e.which != 13; });

Upvotes: 1

Ted
Ted

Reputation: 14927

You can use a little javascript:

var textarea = $("#your_textarea");

textarea[0].onpaste = function() {
    window.setTimeout(function() {
        var output = textarea.val().replace(/\r?\n|\r/g, ' ') ;        
        textarea.val(output )
    }, 1);
}

See this demo

Upvotes: 0

Bill Kindig
Bill Kindig

Reputation: 3632

I think I got it. I wired up an jQuery listener.
Using this, no word wrapping is allowed, even when pasting a multi-line string into it. And spaces are still preserved.

$(document).ready(function () {
    $('#formatTextArea').on("keyup", function () {
        var string1 = $('#formatTextArea').val()
        string1 = string1.replace(/(\r\n|\n|\r)/gm, "");
        $('#formatTextArea').val(string1)
    });
});

<textarea class="compact" id="formatTextArea" rows="1" cols="30" wrap="off"></textarea>

Upvotes: 1

apaul
apaul

Reputation: 16170

It looks like you can use wrap="soft" and possibly max-length

<textarea rows="1" wrap="soft" maxlength="20" ></textarea>

Upvotes: 1

Related Questions