Question

I have this html and css: http://jsfiddle.net/b7rDL/6/

HTML:

<div class="text-block" contenteditable="true" spellcheck="false">Some Text</div>

css:

.text-block {
    resize: none;
    font-size:40px;
    border: none;
    line-height: 1;
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    min-width: 30px;
    overflow: visible;
    white-space: nowrap;
    display: inline-block;
}

This code allows me to write text with no width limit or height limit. It displays no scroll bar and it grows with the text. Those are basically the features I need.

1. How can I convert this to regular textarea that will act the same? I want this to work on browser that doesn’t implemented “contenteditable”. Therefore I want to replace the div with textarea or other basiv element. How can I do it? (I don’t mind using JavaScript).
2. How can I disable the spellchecker? spellcheck=false doesn’t work. In the example, when I focus on the text box, I get that buggy red line. I am using Firefox.
3. How can I get rid of the border when I am focused? – SOLVED

I don’t mind using JavaScript to solve those issues.

Any answer for those questions will help me.

Thanks

UPDATES:
@Oylex helped me with 3

Answer 1

I was having trouble figuring out the bounds of the textarea‘s content, so with this approach I’m copying the content of the textarea into a similarly styled p element, which is set to float: left; and then resizing the textarea based on the size of the p. This handles both width and height.

I’ve tested on Mac 10.8.1 FF 18.0, Safari 6.0, Chrome 25.0.1362.0 canary, iOS Safari 6.0.1 and iOS Simulator 5.1 (272.21). I don’t have a PC or IE handy.

http://jsfiddle.net/b7rDL/34/

HTML

<textarea id="tx" class="text-block" spellcheck="false"></textarea>
<p id="dupe" class="text-block"></p>

CSS

.text-block {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    resize: none;
    font-size:14px;
    border: none;
    line-height: 1;
    min-width: 30px;
    overflow: hidden;
    white-space: pre;
    display: block;
    outline: none;
    width: 30px;
    height: auto;
    border: 1px solid #ddd;
    background-color: #f7f7f7;
}

#dupe {
    float: left;
    display: none;
    width: auto;
    height: auto;
}

_{I added a background and border so I could see what’s going on.}

JavaScript

// no `var` so they are global and easier to work
// with in the inspector when using jsFiddle

$tx = $('#tx');
$dupe = $('#dupe');
lineH = Number($tx.css('line-height').replace('px',''));

update();

$tx.on('keydown', function() {
    setTimeout(update, 0);
});
$tx.on('propertychange input keyup change', update);

function update() {
    $dupe.text($tx.val());
    $tx.css({
        width: $dupe.width() + 7,
        height: $dupe.height() + lineH
    });
}

// not sure if this is needed, leaving it because
// I don't have many browsers to test on
 $tx.on('scroll', function() {
     tx.scrollLeft = 0;
     tx.scrollTop = 0;
 });

I’m adding extra space on the right and at the bottom because it seems to perform more consistently that way. Also, in the HTML, the wrap="off" is necessary for the version of Firefox, I’m using.

I got some good tips from this blog post.