tags:

views:

83

answers:

2

How to hide cursor in asp.net textbox using JavaScript? I don't want see blink thing in textbox.

+8  A: 

Please don't do this, you're breaking the user's expectations, the cursor is there for a reason, when the user types or hits delete, backspace, etc...they want to know where it's going to happen at.

If you want to edit a textbox and then cause focus to leave, that's a different matter, just focus another element:

document.getElementById("otherElement").focus();
Nick Craver
I cannot agree more strongly.
Ender
That is user requirement. How can we do this?
James123
@James123 - Beat the user with a shovel? No kidding this is a **really** bad idea, and you should fight to not have this go into production anywhere. It isn't easy because browser makers *shouldn't* make this easy.
Nick Craver
This could be for a tablet app, where a cursor would be extraneous and annoying.
no
@no - A cursor, even on a tablet, tells me what my delete key is doing and where my text is being inserted, *many* tablets have onscreen keyboards. For example iPhone/iPad.
Nick Craver
A: 

Here's something you can try.

disclaimer -- as others have mentioned, it sounds like you're headed for an accessibility nightmare. You (or your client) still might have their reasons for wanting this behavior, though. This is a terrible hack, but it might give the results you want.

Hack

Have two text boxes, a real textbox that the user never sees but enters the text into and a dummy text box that displays the text. When the user clicks the dummy textbox, the real textbox should be focused. When the user edits the contents of the real textbox, the dummy textbox should be updated.

Example

Test it out here - http://jsbin.com/ihobe4/edit

function makeCaretInvisible(textboxId) {

  var inputBox = document.getElementById(textboxId);

  var outputBox = inputBox.cloneNode(true);

  outputBox.id=outputBox.name='';

  outputBox.onclick=function(){
    inputBox.setSelectionRange(outputBox.selectionStart, outputBox.selectionEnd);
  };

  inputBox.onkeyup=function(){
    outputBox.value=inputBox.value;
  };

  inputBox.style.position='absolute';
  inputBox.style.top='-10000px';

  inputBox.parentElement.insertBefore(outputBox, inputBox);

}​
no