How can I use this square cursor ( image below ) in the input tags ?
+2
A:
AFAIK, that's not possible for html text box, you could style the input itself but you can do nothing about the cursor other than applying the cursor options that are already available :(
Sarfraz
2010-09-21 07:11:37
Thats right. Mouse cursors can be manipulated. Text cursors cannot.
elusive
2010-09-21 07:14:12
+8
A:
Sample
I've changed how it works, and it seems to solve a few issues :)
- Accepts any text a normal input can
- Backspace works
- Theoretically can support pasting text
Usual caveats apply still, most notably the inability to visually see where the caret is.
I'd think long and hard whether this solution is worth implementing, based on its drawbacks and usability issues.
alex
2010-09-21 07:16:04
+1 for a cool little example...more caveats come to mind, like support for multiple elements, tab index issues, accessibility, etc.
Tim
2010-09-21 07:45:42
very good solution. Now there are only 2 problems: 1) Only uppercase chars 2) Backspace and Enter doesn't work.
xRobot
2010-09-21 07:57:15
yeah, it does have some serious limitations. Backspace and Enter could be added. Look for their keycode and submit a form or `substr(str, -1)`. It all depends on how far your willing to go vs how bad you want this kind of input.
alex
2010-09-21 08:39:05
Three more fundamental problems: one, the cursor cannot be placed anywhere other than at the end of the text; two, the `keyCode` property of a `keyup` (or `keydown`) event is not a character code and should not be treated as such. Use only the `keypress` event for handling text input; and three, this is not a form input so cannot be submitted to the server. You'd need a hidden input that's automatically kept in sync with the content of your div.
Tim Down
2010-09-21 09:19:55
@Tim Down See the second revision. It allows any text an input can, and it *can* be submitted to the server. Though you can't place the cursor in any arbitrary position. See the part about *caveats* :P
alex
2010-09-21 09:22:32
That was me, because as it was before your recent changes I thought it was too flawed to be useful. I've removed my downvote now because you've fixed many of the issues.
Tim Down
2010-09-21 09:39:41
A:
you can't. which means: you could do it yourself by using a fixed-with font, use a blinking gif als background which position is set dynamicaly by calculating the with of the already typed text - but there will be the "normal" cursor above your gif, making this solution ugly
oezi
2010-09-21 07:17:07
+1
A:
For <input> tags, there's not much you can do. If you didn't mind it being a horrible hack, you could always use JavaScript to resize the text box as needed (set width = *something* * count), and have an <img> with the cursor to the right.
I don't think there are any less 'ugh' solutions, bar handling the text input yourself, which is probably overkill.
Lucas Jones
2010-09-21 07:17:17
A:
You would have to 1) roll your own textbox and 2) hide the real cursor by continually focusing it elsewhere. Then, capture the key events at the document/body level, and insert that value into your own element. The cursor would then be an animated GIF that was always positioned at far right of your "textbox".
You will run into issues with #2, and the whole thing is generally inadvisable. HTML 5 opens up some new possibilities, but it's still an awful lot of work for a cursor.
Tim
2010-09-21 07:21:58