12

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.

arttronics
  • 9,957
  • 2
  • 26
  • 62
Erik
  • 14,060
  • 49
  • 132
  • 218
  • You won't be able to see the textarea at all if you set the opacity to 0.... that's not even possible.. you'd have to do some sort of overlay probably – jeschafe Jul 17 '12 at 05:57
  • Why do you need this and what exactly are you trying to accomplish with this? There may be a better way than you are doing it. – Skovy Jul 17 '12 at 06:03
  • ***Erik, I've rolled back the edit because your recent change was extremely unclear.*** – arttronics Jul 22 '12 at 06:52
  • I want to remove the topic because my problem is unsolvable. – Erik Jul 22 '12 at 06:55
  • ***Somebody may have a solution.*** How about this idea: Wrap the **^** in a span tag with CSS rule set to allow visibility while the rest of the text is set to transparent? – arttronics Jul 22 '12 at 06:57
  • All I have are ideas. Here is another one: How about to detect when the keyboard has the **^** key pressed and that in itself will allow the caret character to be visible. Not tired is this other [**idea**](http://www.webdeveloper.com/forum/showthread.php?t=250473). – arttronics Jul 22 '12 at 07:02
  • 1
    I'll sponsor a Bounty to help with this interesting Question. – arttronics Jul 22 '12 at 07:23
  • What's the point of an editor, if you can't see, what you are typing? – yunzen Jul 22 '12 at 09:53
  • I can listen for keypress event and handle for my purpose. – Erik Jul 22 '12 at 15:59
  • arttronics. Thank you for the demo. Is it possible to handle mouse click for moving caret? If so it's that I need. – Erik Jul 23 '12 at 14:48
  • Erik, yes it's possible. See **Status Update** in my Answer below. – arttronics Jul 30 '12 at 07:33

4 Answers4

7

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.

Community
  • 1
  • 1
arttronics
  • 9,957
  • 2
  • 26
  • 62
  • I understand only one font color can be used within a text area, so to get the carat to show up, what if you changed the cursor to a carat? would that address the question? http://forum.unity3d.com/threads/74821-How-to-Change-Cursor-in-TextArea – ph33nyx Jul 23 '12 at 21:02
  • Unfortunate the cursor (or browser text-caret) is not touchable. – arttronics Jul 23 '12 at 21:19
4

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.

Kjartan
  • 18,591
  • 15
  • 71
  • 96
  • **+1** Thanks for the Answer and providing this question with needed attention. I really like the fact that after viewing the typed character, it physically is not text-selectable any longer. – arttronics Jul 23 '12 at 20:46
2

Here is a CSS3 solution for making the text, itself, transparent:

Set the color attribute to be color: rgba(0,0,0,0); for the text

The only problem is that the caret goes invisible to. I did a quick search and found out that the caret and its styling are completely at the disposal of the browser. As such, the only option that I can think of for you is to use Javascript to add a simulated caret to the end of what you are typing.

I have an idea of how to do this, but it's messy and I wouldn't exactly call it ideal - I am, however, going to write it in case it helps further someone else's idea:

  1. add a hidden label to the page
    • make sure it's hidden and not display: none; (so that it has actual width)
    • set white-space: nowrap; to keep it all on one line)
    • make sure the text is styled exactly the same as the text in the textarea
  2. add the element <span id="caret">|</span> right before the textarea (I will refer to this as the caret for the rest of the spec)
    • set its position to position: relative;
    • increase its z-index to make it overlay
    • shift it right in order to set it on top of where the ACTUAL caret's initial position would be
  3. make a function to check take in the value of the textarea and check the width of the textarea against the position of the caret (lookup selectionStart if you don't know how to do this)
    • the problem here is that characters are not always the same length, nor are they always the same length as their counterparts in other fonts
    • to solve this, as text is entered into the textarea you should have it imitated in the hidden label you created in step 1
      • imitate only the text from the start of the textarea to the caret's current position
      • wrap each character (including spaces) in their own span
    • next you will have to call a function to compare the width of the label with the width of the textarea
      • if the label is less wide than the textarea, get the width of the last span in the hidden label and shift the caret to the right by that width, then move on to step 4
        • as this is function will be run as text is entered it will happen one character at a time
        • be careful here that the caret doesn't go outside the textarea when it's in its last and near last positions
      • if the label is wider than the textarea:
        • add the widths of the characters (spans) in the label one at a time until you reach the width of the textarea
        • shift the position of the caret down by the height of the font and back to the horizontal starting position (as the caret's position is relative, just change its left position back to (0 + offsetToACTUALCaretPosition)
        • use a flag (e.g. class="break") to mark the last span (character) in the previous row
        • call the width comparison function again
          • make sure that you include a condition to check for the flags that you added at the end of each "row" (if any)
  4. if you haven't already, apply any desired CSS styles to the caret span and change the color of the textarea's text to be color: rgba(0,0,0,0);

Caveats:

  • this will have a lot of overhead for the tiny job it does
  • you will have to adjust this method to account for padding
  • you will have to adjust this method to add support for deleting characters and moving the carets to an earlier position (to the left)
  • if you leave the textarea scrollable, you will have to add support for that (also for similar settings, like static heights causing text to scroll or move off screen/out of the textarea's visible area)

As I said before, I know that this solution is very rough, but it may help someone come up with a better one.

Good luck!

Zachary Kniebel
  • 4,686
  • 3
  • 29
  • 53
  • 1
    **+1** I've awarded the Bounty I sponsored to you for being the best at addressing the main bounty tag-line: ***Perhaps there is a clever way to achieve this seemly impossible task.*** Cheers! – arttronics Jul 29 '12 at 07:26
  • 1
    Thanks so much! I hope it helps or at least provokes some ideas :) – Zachary Kniebel Jul 29 '12 at 07:28
-3

Based on your edit, if you need to just hide a textarea why don't you use jQuery $('#your_id').hide();

Skovy
  • 173
  • 2
  • 15
  • Using `color:white` or `color:transparent` makes the text appear invisible but I believe the caret cannot be a different color from the text within the text area. – Skovy Jul 17 '12 at 06:36