0

我正在尝试制作一个按钮来清除它旁边的输入。到目前为止我的代码是这样的，

<input type="file" name="lay4img1" id="lay4img1">
<a href="javascript:;"
   onclick="
     if(document.getElementById('lay4img1').value != '') {
       document.getElementById('lay4img1').value = '';
       alert('clear success');
     } else { 
       alert('failed'); 
     }">
   <input type="button" value="Clear">
</a>

当我选择一个文件并使其lay4img1具有值，然后按下按钮时，警报clear success被执行，所以document.getElementById也被执行，但该字段仍然不为空？我的代码有什么问题？

除了<input type="file" name="lay4img1" id="lay4img1">，我还有其他字段，所以我不想也不能使用<button type="reset">它，因为它会清除整个表单，我认为这不是用户友好的。

4

2 回答 2

1

这是绑定处理程序的一种可怕方式。此外，用锚包裹按钮是完全没有意义的。考虑使用 JS 添加事件监听器。此侦听器删除旧输入并将其替换为新输入：

HTML：

<input id="mybutton" type="button" value="Clear">

JS：

function clickhandler(){
     var input = document.getElementById('lay4img1');

     var replacement = document.createElement('input');
     replacement.type = "file";
     replacement.id = 'lay4img1';
     replacement.name = 'lay4img1';

     if(input.value != '') {
       input.parentElement.replaceChild(replacement, input);
       alert('clear success');
     } else { 
       alert('failed'); 
     }
}
var button = document.getElementById('mybutton');
if (!button.addEventListener) {
    button.attachEvent("onclick", clickhandler);
}
else {
    button.addEventListener("click", clickhandler, false);
}

这是一个演示：http: //jsfiddle.net/LHM9V/1/

于 2012-11-26T08:31:39.930 回答
1

如果输入字段是同级的，如下所示......你可以试试这个带有onClick属性的javascript代码......

<form>
     <input type="file" name="lay4img1" id="lay4img1">
     <button type="button" onClick="this.parentNode.getElementsByName('lay4img1')[0].value=new Array();">Clear</button>
</form>
于 2012-11-26T08:37:31.883 回答