5

このコードを誤ってWebで見つけて、問題のほとんどを解決しました。ただし、このコードに追加したいことが1つありますが、質問がどのようになっているのかわかりません。ユーザーの後にテキストボックスを終了するにはどうすればよいですか。それをダブルクリックしたか、ユーザーが編集を終了した後ですか？ 

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
    <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    function INPUT(id){
    var obj=document.getElementById(id),tds=obj.getElementsByTagName('TD'),z0=0,ip,html;
    for (;z0<tds.length;z0++){
    tds[z0].onmouseup=function(){ AddInput(this); }
    }
    }

    function AddInput(td){
    var ip=zxcAddField('INPUT','text','');
    ip.value=td.innerHTML;
    td.innerHTML='';
    td.appendChild(ip);
    td.onmouseup=null;
    }

    function zxcAddField(nn,type,nme){
    var obj;
    try {
    obj=document.createElement('<'+nn+' name="'+(nme||'')+'" '+(type?'type="'+type+'" ':'')+' >');
    }
    catch(error){
    obj=document.createElement(nn);
    if (type){
    obj.type=type;
    }
    obj.name=nme||'';
    }
    return obj;
    }


    /*]]>*/
    </script>
    <script type="text/javascript">
    /*<![CDATA[*/

    function Init(){
    INPUT('tst');
    }

    if (window.addEventListener){
    window.addEventListener('load',Init, false);
    }
    else if (window.attachEvent){
    window.attachEvent('onload',Init);
    }

    /*]]>*/
    </script>
    </head>

    <body>
    <table id="tst" border="1">
    <tr width="200">
    <td>some html</td>
    </tr>
    </table>
    </body>

    </html>
4

1 に答える 1

2

まず、問題の要素以外の何かがクリックを受け取ったときに発生する、 blurAddInputイベントのリスナーを設定するために変更します。

function AddInput(td){
    var ip=zxcAddField('INPUT','text','');
    ip.value=td.innerHTML;
    ip.onblur = function () { removeInput(ip); };
    td.innerHTML='';
    td.appendChild(ip);
    td.onmouseup=null;
}

次に、 がブラーイベントを発生させたときに のコンテンツremoveInputを置き換える新しい関数を追加できます。<td><input>

function removeInput(input) {
    var val = input.value;
    var td = input.parentNode;
    td.removeChild(td.lastChild);
    td.innerHTML = val;
    td.onmouseup = function () { AddInput(td); };
}

この関数は、関数内で設定されるため、 mouseupイベント リスナーも再割り当てします。nullAddInput

Chrome 22 ではこれでうまくいきましたが、インライン イベントと属性の割り当てにクロス ブラウザーの問題が存在する可能性がある場合は、テストして修正するために少し余分な作業が必要になる可能性があることに注意してください。

それが私のコードであれば、おそらく「標準」バージョンをaddEventListenerand getAttribute()/を使用して書き直してsetAttribute()から、同等のものを使用して修復用の IE 専用パスを作成します。または、jQuery を使用して、すべてのクロスブラウザー処理を実行させてください。

于 2012-10-22T06:48:39.190 に答える