2

Situation

This question has been asked before, but I have never seen a good solution. First I will explain my situation, so read first, since I already know that you are wanting to ask: 'Why would you do that?'..

I have a div on top of an input. I made the input content fitting, and so does the div. Thus the width is always exactly the width of the text itself. (Used javascript: Math.max(offsetWidth, scrollWidth))

I do this, obviously, because I would like to have my own input object. But since you cannot use html in input, I have this div-layer on top of it, so I am more flexible. But I still need the input below it, because it is nearly impossible to click and select text in a div and get from the mouse coordinates the good caret position. Thus I put the input on top of the div, but make it opacity = 0. This gives me good invisibility, but still the ability to focus the input correctly.

Problem

In IE (I tested only IE8) the caret from the HTML input element is always visible even when opacity set to zero.

Question

Given the constraints from the Situation - thus the input must be editable and visible but with opacity to zero - How can I hide the caret from an HTML input element for every browser, even when opacity is set to zero?

Try-out Code

jsFiddle

<?xml version="1.0" standalone="no" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
*
{
    padding: 0px;
    margin: 0px;
    position: relative;
}
html, body
{
    width: 100%;
    height: 100%;
}
.hidden_input
{
    -moz-opacity: 0.2;
    opacity: 0.2;
    filter: alpha(opacity=20);
    float: left;
}
.visible_output
{
    position: absolute;
    float: left;
    white-space: pre;
}
</style>
</head>
<body>
<input type="text" id="in" onkeyup="document.getElementById('out').innerHTML=this.value;" class="hidden_input" />
<div id="out" class="visible_output"></div>
</body>
</html>

Note that there are some white-space problems, and input does not fit content, but that is not really part of the question here. Also for extra clarity I set the input opacity to 0.4 instead of 0. This should easily demonstrate how the caret in FF gets semi-transparent, but in IE it stays fully opaque.

2
  • 1
    Can you just use contenteditable on your div instead and forget this whole overlapping elements thing?
    – mrtsherman
    Feb 23, 2012 at 13:58
  • Wasn't that full of bugs? Also, I kinda completed my input, and it looks very good now and works perfectly without any bugs thus why change something that I know works good? Except for the damn caret in IE =( But perhaps you be right and I have to look into that again.
    – Yeti
    Feb 23, 2012 at 14:58

2 Answers 2

3
<script>
$('div').mouseup(function(){
    $(this).blur()
})
</script>
<div contenteditable='true'></div>
0

Okay, so after I finished this, I really wanted to get an answer. So actually, I found a perfect solution to my own problem. Not really a nice and direct solution, but rather a workaround that works in my specific situation.

The solution lies in the fact that the caret is NOT shown in IE when it is in the overflow of an element, with overflow set to hidden. Thus if you have:

<div style="overflow: hidden;position: relative;">
    <input type="text" style="position: absolute;top: -30px;" />
</div>

If the input has focus (by tabbing through the focusable elements) you will see that the caret is not shown. So the solution is to make the input element for example height: 60px; and set top: -30px;. Now you can still press in the invisible input, but the caret is hiding somewhere in the overflow.

But now a new problem occurs. You cannot select text in an input if you are not selecting it on the line itself. So, I had to do a little bit nasty javascript in it, that if I do onmousedown on the input, the input changes back to top: 0px;height: 30px;, and the other way around on the onmouseup event. This can be safely done since no caret exists when text is selected.

I tested this solution in both FF and IE8, and the complete thing now works perfectly. I put the whole thing now on the internet: https://jsfiddle.net/90L5jme6/. You can see how the selection mechanism works by setting opacity of the input to 0.2 and setting the overflow of the inputcontainer to visible.

2
  • The example link doesn't seem to achieve the intended result in IE9, FF13 or Chrome assuming I've understood correctly and the intention is to hide the caret in a textbox...
    – Chris B
    Jul 2, 2012 at 15:38
  • Heheh, it certainly does show a caret, but it is not the one of your OS. The caret you are seeing is just a small <div>-element ;) This is kinda experimental stuff though, I'd agree with that.
    – Yeti
    Dec 8, 2012 at 10:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.