CODEWITHSUNDEEP
javascript
user2781855
user2781855

Reputation: 39

issue in making part of input box uneditable in javascript

I am making a terminal command prompt (the user can write on input-box and press enter and recieves the command from backend).

I am passing a default value from model to my template for my input-box. This default value is a response that is fetched from backend and every time it changes (like different usernames and it is in form of "name $>" ) but I want to lock it before $ so user cannot go back and write before that, that is what I have tried:

var textValue = this.model.get("name") + " $> ";
var textString = String(textValue); 
var textStringLength = textString.length;
$("#textInput").on("change keyup keypress keydown", function(evt) {     
    if($("#textInput").val().length < textStringLength) {
       $("#textInput").val(textValue); 
    } 
});

but I still can edit it! surprisingly it only works for backspace (which means I can not delete it by backspace) but if I use arrow keys or put the mouse cursor in between i still can edit! Any idea?

That is my inputbox: <input type="text" id="textInput" name="" style="background: #222; autofocus> Any idea? with span as another solution?

Upvotes: 0

Views: 73

Answers (3)

FixMaker
FixMaker

Reputation: 3877

Why not lay out your HTML like this:

<span id="prefix"></span><input type="text" id="textInput" />

Then you can modify your code like so:

var textString = this.model.get("name") + " $> ";
$('#prefix').text(textString);

Now you can edit the command after the >, but the prompt is not editable.

You can see a crude example here: http://jsfiddle.net/5Nnqa/

Upvotes: 1

Amit Singh
Amit Singh

Reputation: 2275

Try Adding this:

$("#textInput").attr("disabled",true);

after:

$("#textInput").val(textValue);

Upvotes: 0

Ripa Saha
Ripa Saha

Reputation: 2540

if You use 2 textboxes like below then I think Your problem will be solved. I have already applied this logic for solving my own similar type problem.

<input type="text" id="textInput1" size="1" name="" style="border-right:0px;" value="$" readonly="readonly">
<input type="text" id="textInput" name="">

You will have use some css for adjustment.

Upvotes: 0

Related Questions