HTML <input type = "text" ... as <input type = "file"

Question

Как установить <input type="text"... только для чтения, но разрешить удаление его значения?

Другими словами, как добиться поведения, подобного <input type="file"..., когда вы не можете вручную ввести путь к файлу, но вы можете удалить то, что было введено с помощью кнопки «Обзор».

Answer 1

С учетом этого HTML:

<input type="text" class="onlydelete" value="Nyedva Nyedva" />

Следующая функция jQuery разрешает использование клавиши Backspace только в полях ввода с классом onlydelete.

$('.onlydelete').keypress(function (e) {
    return (e.which===8);
});

ОБНОВЛЕНИЕ:

Я обнаружил, что вам также нужен ключ удаления.И я думаю, вы также хотели бы позволить клавишам со стрелками позволить пользователю перемещать каретку.Для этих специальных клавиш вы можете использовать keydown.В следующем фрагменте разрешены только клавиши Delete (46), Backspace (8) и клавиши со стрелками (37-40).

$('.onlydelete').keydown(function (e) {
    return (e.which===46 || e.which===8 || (e.which>=37 && e.which<=40));
});

UPDATE 2:

ДругойХорошая вещь о добавлении класса в том, что вы можете легко стилизовать эти специальные входные данные с помощью CSS.Например:

.onlydelete { background-color: #aaaaaa; }

Answer 2

JQuery:

<input type="text" id="name1" name="name" readonly="readonly" value="demovalue" />
<input type="button" onclick="$('#name1').val('');" value="clear">

базовый:

<input type="text" id="name1" name="name" readonly="readonly" value="demovalue" />
<input type="button" onclick="document.getElementById('name1').value='';" value="clear">

Answer 3

Попробуйте это:

var inputBox = document.getElementById("inputBox");

inputBox.onkeypress = checkInput;

function checkInput(e) {
  // checking if the pressed key is delete or backspace
  // if not, we prevent character input
  if (e.keyCode != 8 || e.keyCode != 46) {
    e.preventDefault();
  }
}

// also a button to clear the input value
document.getElementById("delete").onclick = function() {
  inputBox.value = "";
}

<input type="text" id="inputBox" value="this is a test" />
<input type="button" id="delete" value="delete" />

Answer 4

как то так?

<input type="text" onclick="this.value='',this.disabled='disabled'" value="text">

если вы не хотите менять фон на серый, вы можете добавить и следующее css:

input[disabled] {background:white;border:1px solid #7F9DB9}

Демо: http://jsfiddle.net/utw8y/1

Обновление

Используя только клавиши удаления или возврата, вы можете использовать следующий код jQuery:

$('input').keypress(function(event) {
    if ((event.which!='0') && (event.which!='8')) {
     event.preventDefault();
    } else {
    $(this).val("");    
    }
});

Демо: http://jsfiddle.net/utw8y/2/