HTML <input type =“text”... as <input type =“file”

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

这样的事情？

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

Answer 3

考虑到这个HTML：

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

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

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

UPDATE：

我发现，你还需要删除键。我想你也想让箭头键让用户移动插入符号。对于这些特殊键，您可以使用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 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" />