Question

我需要你的帮助，

以下javascript代码显然会附加到我的输入框和按钮上。为什么它会自我附加到我的按钮？当我想要它附加的唯一的东西是我的输入类型=“文本”。

    // HANDLE ALL INPUT/TEXT BOXES
    var x = document.getElementsByTagName('INPUT');
        for (var i = 0; i < x.length; i++) {
        alert(x[i].id)         
            if (!x[i].readOnly) {
                if (x[i].id == "refdocs_input") {
                    x[i].onfocus = document.getElementById('refdocs_select').onfocus = function() {
                            document.getElementById('refdocs_wrapper').style.backgroundColor = shade;
                            document.getElementById('refdocs_select').style.backgroundColor = shade;
                            document.getElementById('refdocs_input').style.backgroundColor = shade;
                    }//end function
                    x[i].onblur = document.getElementById('refdocs_select').onblur = function() {
                            document.getElementById('refdocs_wrapper').style.backgroundColor = unshade;
                            document.getElementById('refdocs_select').style.backgroundColor = unshade;
                            document.getElementById('refdocs_input').style.backgroundColor = unshade;
                    }//end function
                }//end if
                else {
                    x[i].onfocus = function() { this.style.backgroundColor = shade }
                    x[i].onblur = function() {  this.style.backgroundColor = unshade }     
                }//end else
            }//end if
        }//end for

按钮的HTML编码：

    <div style="float: left; padding-left:  20px; padding-right: 10px;"><input type="button" class="button" id="search" value="Search" onclick="imts_eval_search()"></div>
    <div style="float: left; padding-right: 10px;"><input type="button" class="button" id="save" value="Save" onclick="imts_save_changes()"></div>
    <div style="float: left; padding-right: 10px;"><input type="button" class="button" id="add" value="Add" onclick="imts_add_new()"></div>
    <div style="float: left; padding-right: 10px;"><input type="button" class="button" id="clearall" value="Clear all" onclick="reset_fields()"></div>
    <div style="float: left; padding-right: 10px;"><input type="button" class="button" id="delete" value="Delete" onclick="test101()"></div>
    <div style="float: left; padding-right: 10px;"><input type="button" class="button" id="recall" value="Recall" onclick="imts_eval_search('recall')"></div>
    <div style="float: left; padding-right: 10px;"><input type="button" class="button" id="debug" value="Debug" onclick="test()"></div>
    <div style="float: left; padding-right: 10px;"><input type="button" id="test_save" value="Save Changes" disabled/></div>

Answer 1

我建议不要使用输入。只需使用<button>

如果不使用<button type="submit">

，则自己的按钮应提交表单

或者您可以检查类型

for (var i = 0; i < x.length; i++) {
    if(x[i].type === 'text') {
       // stuff
    }
}

Answer 2

我建议进行一次简单的检查

if (document.getElementsByTagName('INPUT').].getAttribute("type") == "text")  {
    // do stuff here
}

这应该照顾两个案例

<input type="button">
  and 
<button>

Answer 3

我建议你使用querySelectorAll方法。它需要一个或多个CSS选择器并返回一个DOM节点数组。

document.querySelectorAll('input[type="text"]');

用于文本类型的输入标记。

document.querySelectorAll('input[type="button"], button');

用于按钮和按钮类型输入。

将属性设置为仅输入框而不是按钮

3 个答案: