Question

如何将<input type="text"...设置为只读但允许删除其值？

换句话说，如何实现<input type="file"...之类的行为，您无法手动输入文件路径，但可以删除“浏览”按钮注入的内容。

Answer 1

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 2

考虑这个HTML：

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

以下jQuery函数只允许在类onlydelete的输入字段中使用Backspace键。

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

<强>更新

我发现你还需要删除键。我想你也想让箭头键让用户移动插入符号。对于这些特殊键，您可以使用keydown。以下代码段仅允许删除（46），退格键（8）和箭头键（37-40）。

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

更新2：

添加类的另一个好处是，您可以使用css轻松设置这些特殊输入的样式。例如：

.onlydelete { background-color: #aaaaaa; }

Answer 3

这样的事情？

<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

更新

仅使用delete或backspace键，您可以使用以下jQuery代码：

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

演示： http://jsfiddle.net/utw8y/2/

Answer 4

试试这个：

＆＃13;

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 = "";
}

＆＃13;

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

＆＃13;

HTML

4 个答案: