HTML <输入类型=“文本”... as <输入类型=“文件”

Question

如何将 设置为只读但允许删除其值？

换句话说，如何实现像 这样的行为，您无法手动输入文件路径，但可以删除通过“浏览”按钮注入的内容。

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

更新

仅使用删除或退格键，您可以使用以下 jQuery 代码：

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

演示： < a href="http://jsfiddle.net/utw8y/2/" rel="nofollow">http://jsfiddle.net/utw8y/2/

Answer 4

试试这个：

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" />