JavaScript to prevent user from removing *part* of a value

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

JavaScript to prevent user from removing *part* of a value

Post by Chris Corbyn »

To give an idea of why I need this I'll explain.

I'm writing a tool that mimics a command line console... it uses JavaScript on the client side along with a bit of AJAX.

The cursor sits inside an input (type="text") element waiting for commands to be typed. This box has a prompt inside it:

Code: Select all

<input type="text" name="foo" value="prompt> " onkeyup="checkCommand()" />
Now when the command is sent, JavaScript simply removes the prompt text. The user can actually just backspace to delete the prompt at the moment though... I don't want that :( I actually want to somehow stop the caret from going in that part of the text box (hmm... I think I'm starting to figure this out in my head with document.selection).

I'm very aware that there are better ways to place the prompt there (use a div or span) but this just means that the styling and spacing will be consitent with the rest of the app... I'll change it if there really isn't a way to do this.

Anyone got any bright ideas? :)
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

heheh.. some trickery is in order! I've employed something like this previously with great success, although I can't remember the exact syntax, but hopefully it'll give you the idea:

Code: Select all

input, div.input { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1em; line-height: 1.3em; height: 1.3em }
div.input { position: absolute; top: auto; left: auto }
div input { background: transparent; padding-left: 10em; border: 1px solid black }

<div>
  <div class="input">Prompt></div>
  <input type="text" value="sometext" />
</div>
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

In your onkeyup event, couldn't you check if the key was a 'backspace' or 'delete' and check if the cursor position is in the first 7 characters?

Otherwise, ~feyd's solution would work too.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

pickle wrote:In your onkeyup event, couldn't you check if the key was a 'backspace' or 'delete' and check if the cursor position is in the first 7 characters?

Otherwise, ~feyd's solution would work too.
Problem with doing it onkeyup is that the user would see the "bounce" ... i.e. it would actually delete the character and then do the check. I think I'll just do what feyd suggested actually since you won't get the issues across different browsers... I was thinking about things like if the user changed the font size then the spacing between the prompt and the input wouldn't be one space character like it should be :( That and it would make it easier for users to write templates without including the prompt themselves...

I'll let you know how it goes :)

Thanks guys ;)
Post Reply