0

So, this is a design decision that many of you may find odd. I would like to hide the caret from appearing in a textbox on a webpage but I want the textbox to remain active.

I was surprised to find that CSS does not actually offer any functionality for custom carets, admittedly it's nothing I've ever had the need for in the past but I thought that surely I wouldn't be the first to want to do this.

The best way for me to explain what I have done is by my showing you the website. www.hududandescape.com

As you can see, I have created my own custom caret which just blinks at the end of the text box that has been styled to blend in with the background. The textbox always keeps focus so there is no risk of users not being able to type in it.

My issue is that the caret that comes with the text box is still blinking. I have fixed this in Chrome and Safari by putting a small black box over the top of the very end of the box, thus covering up the caret. This solution is not ideal however and it does not work in Firefox or IE.

Your solutions, no matter how creative, are highly welcomed :)

Andy

apbarratt
  • 615
  • 9
  • 18
  • you could cover the text box with a canvas element having an opaque background. Then, monitor the text box for changes, and whenever the value changes draw the appropriate text onto the canvas. – Lee Dec 02 '12 at 16:29
  • Tried these SO questions? [One](http://stackoverflow.com/questions/3671141/hide-textfield-blinking-cursor), [Two](http://stackoverflow.com/questions/1071356/is-it-possible-to-hide-the-cursor-in-a-webpage-using-css-or-javascript) – Mendhak Dec 02 '12 at 16:30
  • The second doesn't apply, the first one is more or les a duplicate, though. @Shah – 11684 Dec 02 '12 at 16:34
  • Lee, that's an interesting idea. I haven't used canvas before, might be worth a shot. Am I right in thinking however that I'd have issues with older browsers? I've tested it going back to IE7 (using the compatibility mode in IE10). But then, perhaps the exact same solution could be implemented but just using an opaque DIV box over the top of the always focused text box. Yeah, I think that might work, I'll see what I can do. – apbarratt Dec 02 '12 at 16:35
  • Lee, I have put a div box over the top of the textbox and on key up, I copy its value into the div box. I suppose for people who don't have the box always focused like me, they'd just need to focus the textbox when the div box is clicked. I also had to tell it to replace all spaces with   although, now that I think about it, I probably could have put it all in a 
     tag... ah well, it's done now and it's working.  You can check it out on the site.

Thank you Lee, my shiny golden god.

P.S.  Not sure about Stack overflow etiquette, should I create an answer for this below?
     – apbarratt Dec 02 '12 at 20:32
  • Finally, @Shah, forgive my for ignoring you, I saw you're word "SO" and thought you were complaining about me starting a question with the word "so". Can you tell I'm not here often? Sorry about that :) I have checked the second one and unfortunately it's referring to cursors (the mouse arrow) as opposed to carets (the blinking bar at the end of the text box). – apbarratt Dec 02 '12 at 20:37

1 Answers1

0

I'm not sure, but try something like this. Idea is simple, i think you'll understand reading the code

   <style>
      input#top {
       width:0px;
       border: none;
    }
    #show-input{
       border:1px solid #000;
       width: 100px;
       height: 25px;
    }
  </style>

    <input id='top' /> <!-- 'hidden' -->
    <div id='show-input' ></div> <!-- show input -->
    <script>$(function(){ 
          $("#show-input" ).click(function(){
              $("#top").focus();
          });
          $("#top").keyup(
             function(){ 
               $("#show-input").html($(this).val())
          }) 
    })
    </script>
jorj
  • 153
  • 1
  • 7
  • Thanks jorj, I tried something similar but it would seem that, at least in Chrome, a field parked as hidden cannot receive focus, even if given it by javascript. Good idea though :) – apbarratt Dec 02 '12 at 19:23
  • I know that display:hidden couldn't receive focus, so i give to the element width 0. Ok, i see that Chrome assumes 0 width it's hidden element, no problemo =). Here is changes for previous code: 1) give width to input#top = 1px 2) add in that style text-indent : -99999px; 3) add style input#top:focus { outline : none; } /*removes border on focus*/ – jorj Dec 02 '12 at 20:27
  • That approach is not the best at all. So, i'll advise to use one element with style position: absolute, to "overlap" caret, when you will print something that element would shift, or something like that. If you want i'll write an example of this. – jorj Dec 02 '12 at 20:33
  • I've implemented something similar based on what both yourself and Lee have suggested. Thanks so much for your help, you can take a look on the site, seems to be working now. Have to wait to knick my flatmate's laptop though to test it in IE, I'm a mac user myself :) – apbarratt Dec 02 '12 at 20:43
  • Thanks jorj, probably the most javascript I've ever used on one site :) – apbarratt Dec 02 '12 at 21:38