Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to have transparent fonts except for the 'text-caret' in a textarea?

I have a simple textarea and I need to make transparent letters while allowing the text-caret to be visible. When I apply the following rules then I get invisible caret:

textarea {
   background: transparent;
   opacity: 0;
}

When I type invisible text, I need to see the text-caret move.

EDIT: I need to make editor to edit td cell in table. When I click on a cell I show a textarea and start typing. On a each character letter, I insert a context in a cell. After that, I hide a textarea.

like image 477
Erik Avatar asked Jul 17 '12 05:07

Erik


2 Answers

Time to throw my $0.02 in.

This is an answer to the question, as I understood it, that works, it's quick and dirty, so feel free to make suggestions. This code is untested, but I did create a working fiddle here: http://jsfiddle.net/66RXc/

<html>
<head>
<title>Testing</title>
<script type="text/javascript">
<!--


function call(val) {
    document.getElementById('result').value += val.charAt(val.length - 1);


    document.getElementById('result').value = 
        document.getElementById('result').value.substr(0, val.length);


    document.getElementById('test').value = 
        document.getElementById('test').value.replace(/[^\^]/g, ' ');

}​
-->
</script>
</head>
<body>

<textarea name="textarea" cols="20" rows="5" id="test"
 onKeyUp="call(this.value);"></textarea>

<textarea style="display:block" cols="20" rows="5" id="result" disabled>
</textarea>​

</body>
</html>

The way I approached it was every time a character is typed in textarea "test", copy it over to a hidden text box, and replace all the characters in "test" except ^ with spaces. The characters are hidden, and the carat is still there. The full text is still in the other box. You could use display:hidden instead of display:block to hide it.

This isn't exactly the best implementation in the world, just something I did quickly. You have to type kind of slow (~15-20 WPM) for it to work.

like image 20
evandentremont Avatar answered Oct 23 '22 19:10

evandentremont


This jsFiddle DEMO uses an online tutorial method that has been slightly modified to create a non-native browser text-caret along with transparent text.

Also, this jsFiddle New Method I created handles that goal differently but isn't IE8 friendly.


Status Update: I've improved the above jsFiddle DEMO with this newer version titled:

jsFiddle New Method that's Newer!!

The above jsFiddle version now allows the inside of the text-area to be clicked and the caret will respect that clicked location. This extra functionality was made possible by a great question and answer here.

like image 94
arttronics Avatar answered Oct 23 '22 17:10

arttronics