Question

如何在此案例javascript上使用事件onchange？

首先将数据填入输入id="one"，然后输入id="two"中的数据将更改数据，例如输入id="one"

中的数据

但是，当输入id="two"中的数据发生变化时，为什么不调用fn_2函数（为什么不警告）？

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>         
<script>
    function fn_1()
{    
    var aaa = document.getElementById('one').value;            
    document.getElementById("two").value = aaa;
}
</script>


<script>
    function fn_2()
{    
    var bbb = document.getElementById('two').value;    
    alert(bbb);        
}
</script>


<input type="text" id="one" onchange="fn_1()"/>


<input type="text" id="two" onchange="fn_2()" style="display: none"/>

Answer 1

您想要的是在更改第一个输入框的值时，获取此值并将其设置为第二个输入框并发出警报。在这种情况下，onchange事件不会被触发。为此，您需要手动调用第二个输入框的onchange事件。

<script>
function fn_1() {
    var aaa = document.getElementById('one').value;
    var second_input_elem = document.getElementById("two");
    second_input_elem.value = aaa;
    second_input_elem.onchange();
}

试试这个小提琴http://jsfiddle.net/u09Lurvr/

Answer 2

它工作得很好。

<script>
    function fn_2()
{    
    var bbb = document.getElementById('two').value;    
    document.getElementById("one").value = bbb; 
}
</script>

Answer 3

onchange确实有效，请在输入新值后点击输入框外部...

但您可能希望价值立即更新...使用JavaScript oninput即可实现此目标。

document.getElementById("one").onchange=function(){ 
    document.getElementById("result_one").innerHTML = this.value;
}

document.getElementById("two").oninput=function(){ 
    document.getElementById("result_two").innerHTML = this.value;
}

只要元素的状态发生变化，元素result_one就会更新。所以focused或blurred ...只要有新输入，result_two元素就会更新。

以下是JSFiddle示例。

Edit: 看来我误解或误解了这个问题，但无论如何它仍然有用。

Edit 2: 我似乎再一次误解了这个问题......

为什么没有提醒？

如果您在将值input one和input two更改后的值时预计会收到提醒，那么您正在查看错误的内容...... {{1当元素的状态发生变化时触发函数（对于输入，当值发生变化时+当状态发生变化时）。当值本身发生变化时，onchange函数不会触发...并且由于示例中的原因，警报未被触发，因为状态不会发生变化，仅价值。

但你为什么要这样做？您基本上创建了两个输入，onchange只有一个来自input two的值...并且您在一个元素上绑定一个事件，您可以动态创建该值。它看起来有点混乱......更好的选择是在input one的功能中发出警报......

input one

Answer 4

使用onchange对select元素很有用，在你的情况下，如果你使用'onblur'会更好：

    <script>
function fn_1()
{    
var aaa = document.getElementById('one').value;          
document.getElementById("two").value = aaa;
fn_2();

}

function fn_2()
       {    
var bbb = document.getElementById('two').value;    
alert(bbb);        
}
</script>


<input type="text" id="one" onblur="fn_1()"/>


<input type="text" id="two" onblur="fn_2()" style="display: none"/>

Answer 5

onchange事件将在文本字段中更改某些文本并且变为焦点时生效。希望你这样想。我们看到，它正在以这种方式运作。

如果您想要一种更自动的方法，可以onkeyup字段使用id="one"，onkeypress字段使用id="two"，但在这种情况下应该可以看到

e.g。

//no need to include jQuery library when you are not using it
<script  type="text/javascript">
    function fn_1()
{    
    var aaa = document.getElementById('one').value;            
    document.getElementById("two").value = aaa;
}

    function fn_2()
{    
    var bbb = document.getElementById('two').value;    
    alert(bbb);        
}
</script>


<input type="text" id="one" onkeyup="fn_1()" />

<input type="text" id="two" onkeypress="fn_2()" />

由于您在示例中使第二个字段不可见，因此您将永远不会收到警报，因为有人会为此尝试onchange事件？您能告诉我们如何在第二个字段中处理数据吗？是通过一些JavaScript事件（因此你想要onchange事件）将数据填入其中，还是直接将光标放入其中并进行更改？如果是这样，那么它已经在运作。

如何在这个案例javascript上使用事件onchange？

5 个答案: