вопрос при внесении части окна ввода неотредактируется в javascript

Question

Я делаю командную строку терминала (пользователь может писать в поле ввода и нажать клавишу ввода и получить команду из бэкэнд).

Я передаю значение по умолчанию из модели в мой шаблон для моего ввода. Это значение по умолчанию - это ответ, который извлекается из бэкэнд и каждый раз, когда он изменяется (например, разные имена пользователей и он имеет форму «name $>»), но я хочу заблокировать его до $, чтобы пользователь не мог вернуться и написать до этого, это то, что я пробовал:

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); 
    } 
}); 

, но я все еще могу его отредактировать! удивительно, что он работает только для backspace (что означает, что я не могу удалить его с помощью backspace), но если я использую клавиши со стрелками или поместите курсор мыши между ними, я все еще могу редактировать! Есть идеи?

Это мой входной лот: <input type="text" id="textInput" name="" style="background: #222; autofocus> Любая идея? с пролетом в качестве другого решения?

Answer 1

Try Добавление этого:

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

после:

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

Answer 2

, если Вы используете как ниже текстовые поля, то я думаю, что Ваша проблема будет решена. Я уже применил эту логику для решения моей проблемы подобного типа.

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

Вы должны использовать некоторые CSS для регулировки.

Answer 3

Почему бы не выложить свой HTML, как это:

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

Затем вы можете изменить код следующим образом:

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

Теперь вы можете редактировать команду после >, но подсказка не редактируемые.

Вы можете увидеть грубый пример здесь: http://jsfiddle.net/5Nnqa/