Let's say I have a textfield... is there a way to HIDE the blinking text cursor? I say this because I am doing a horror/mystery website and one of the clues is to start typing anywhere. Get it? :P
Maybe i can do it with javascript?
A:
<input type='text' disabled='disabled' />
Edit:
That disables the textbox effectively removing the blinking cursor.. then I suppose you could use javascript to capture the keypresses and change the value of the textfield
document.onkeypress = functionThatChangesValue;
if (document.layers)
document.captureEvents(event.keypress);
mjw06d
2010-09-08 19:19:05
How are they supposed to type into the box if it's disabled?
animuson
2010-09-08 19:22:49
But I want the user to type in the textfield.
Dan
2010-09-08 19:22:49
[Déjà vu.](http://stackoverflow.com/questions/2162164/how-to-hide-the-text-box-blinking-cursor/2162192#2162192) (Including the incorrect value of `true` for `disabled` :)
BoltClock
2010-09-08 19:24:18
(Re: edit) No, that is not possible. A disabled input does not even allow user focus, so keystrokes cannot be captured on it.
BoltClock
2010-09-08 19:26:20
Haha, I realize that now, I was just answering quickly.. stupid error
mjw06d
2010-09-08 19:27:08
Right, but I'll post the javascript that might allow him to do it. Make a global event handler :)
mjw06d
2010-09-08 19:28:57
@mjw06d: That would take some very complicated JavaScript to determine whether the user is actually trying to type into that box in the first place...
animuson
2010-09-08 19:35:27
@animuson: Just offering one method to accomplish the original question. I'm sure there are other ways of handling it.
mjw06d
2010-09-08 19:37:26
A:
Unfortunately you can not style the text cursor with CSS. You can only do some very bad JavaScript tricks but depending on the layout and requirements of your website, it might not be possible at all. So I would recommend to forget the whole idea.
Kau-Boy
2010-09-08 19:32:12
+1
A:
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title >Text Area with no Carat</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
.textarea-wrapper {
position:relative;
}
.textarea-wrapper textarea {
background-color:white;
}
.textarea-wrapper, .textarea-wrapper textarea {
width:500px;
height:500px;
}
.textarea-wrapper textarea.hidden {
color:white;
opacity:0.00;
filter:alpha(opacity=00);
position:absolute;
top:0px;
left:0px;
}
</style>
<script type="text/javascript">
$(document).ready(
function() {
$("textarea").addClass("-real-textarea");
$(".textarea-wrapper").append("<textarea class=\"hidden\"></textarea>");
$(".textarea-wrapper textarea.hidden").keyup(
function() {
$(".textarea-wrapper textarea.-real-textarea").val($(this).val());
}
);
$(".textarea-wrapper textarea.-real-textarea").focus(
function() {
$(this).parent().find("textarea.hidden").focus();
}
);
}
);
</script>
</head>
<body>
<div class="textarea-wrapper">
<textarea></textarea>
</div>
</body>
</html>
The idea is to create a second, invisible <textarea> over/on-top-of the real one. The user is typing in the invisible one but the text doesn't appear (nor the carot/cursor) as it is invisible! You then use JavaScript to assign its value to the visible one.
But it doesn't seem to work in IE8 :'( the carot is still visible even though the opacity is cranked up to 11.
But it works in Firefox... ?
LeguRi
2010-09-08 20:03:15
A:
There is an easy way to do this with jQuery.
$(<textbox selector>).bind("focus", function() {
return false;
});
When a focus event occurs (what will start the cursor) you just capture it and ignore it.
Ty
2010-09-27 19:15:19