Question

我正在尝试制作一个AJAX页面，允许人们一次编辑一个字段并保存。该页面是通过AJAX加载完成的，因此我不知道所有字段和DIV提交ID名称。

但我们的想法是他们编辑一个字段，按回车（或点击保存），它就会发送一个发送DIV ID的函数。

因此onfocus会在有人选中时调用该函数，这不是我想要的。只有点击才会运行onclick，我无法执行foundNode.click（）;所以它对于treatenterastab的想法并没有真正的帮助。

有人能提供建议吗？

感谢格雷格

       <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5.0/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>

<script type="text/javascript">
// Show and Hide the input element
function ShowHideFields(objName){
  dojo.query("." + objName).forEach(function(node, index, arr){
            console.debug(node.innerHTML);

        var myTextField = dojo.byId(node);
        if(myTextField.style.display == "none") {
            myTextField.style.display = "block";
        } else {
            myTextField.style.display = "none";     
        }

 });
}


// allow edit and save  the data
    function Edit(id)  {
        var task = id.substr(0, 4)
        var id = id.substr(4)
        if (task == "COMM"){
            if(dojo.byId('discom' + id).style.display == 'none'){
                dojo.byId('discom' + id).style.display = 'block';
                dojo.byId('edicom' + id).style.display = 'none';
                dojo.byId('COMM' + id).innderHTML = 'edit';
                EditSave('discom' + id , 'edicom' + id, id );
            } else if (dojo.byId('discom' + id).style.display == 'block') {
                dojo.byId('discom' + id).style.display = 'none';
                dojo.byId('edicom' + id).style.display = 'block';
                dojo.byId('COMM' + id).innerHTML= 'save';
            }
        } else if (task == "NAME"){
            if(dojo.byId('disnam' + id).style.display == 'none'){
                dojo.byId('disnam' + id).style.display = 'block';
                dojo.byId('edinam' + id).style.display = 'none';
                dojo.byId('NAME' + id).innerHTML = 'edit';
                EditSave('disnam' + id , 'edinam' + id, id );
            } else if (dojo.byId('disnam' + id).style.display == 'block') {
                dojo.byId('disnam' + id).style.display = 'none';
                dojo.byId('edinam' + id).style.display = 'block';
                dojo.byId('NAME' + id).innerHTML = 'save';
            }

        }
    }

    function EditSave(destination, source, id ){
        //AJAX here, but for the sake of example this will work.
        if(dojo.byId(destination) )   {
            dojo.byId(destination).innerHTML = dojo.byId(source).value; 
}
    }



// capture the enter, and make it a tab to execute
function treatEnterAsTab(evt) {
    if (evt.keyCode == dojo.keys.ENTER) {
        var formElements = null;
        if (formElements = dojo.query('*')) {
            var foundNode = false;
            for (var i = 0; i < formElements.length; i++) {
                if (evt.target == formElements[i] && formElements[(i + 1)]) {
                    nextNode = formElements[(i + 1)];
                    foundNode =  formElements[(i + 1)];      
                    break;
                }
            }
            if (foundNode && foundNode.focus) {
                //set focus, but really set Click would be better.. Any ideas?
                foundNode.focus();

            }
        }
    }
}

// connect the key press event to the input boxes
dojo.addOnLoad(function(){
    dojo.query("input").forEach(function(node, index, arr){
        dojo.connect(dojo.byId(node),"keypress", treatEnterAsTab);
    });
});

</script>

</head>

<body>

    <div style="position: relative; float: left;">
        <b style="float:left;">My Comment:</b><div id="disnam001" style="float:left; display: block;" > My Comment Here</div><input style="display:none; float:left;" id="edinam001" type="text" name="edinam001" value=" My Comment Here"/>
        <div tabindex="0" onfocus="Edit(this.id);"  id="NAME001" style="position: relative; float: right; margin-left: 10px; cursor:pointer;  height:16px;  padding: 0px 0px 0px 20px;" >edit</div>
    </div>


</body>

Answer 1

关于焦点事件，您可以防止事件冒泡以及执行默认操作。换句话说，您可以捕获焦点事件并让它执行您喜欢的任何操作（或非操作）。您问题的其他部分的答案是相似的。

我个人不使用除我自己以外的任何JavaScript库，所以我无法帮助你在dojo或你可能正在使用的任何其他库中使用我没有任何经验。

也许如果你能够再次阐述围绕手头问题的背景来帮助我的可怜的大脑？ ; - ）

Javascript onclick而不是onfocus，或触发onclick by function

1 个答案: