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

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 に答える
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 に答える