javascript 一个文本框的值如何根据另一个文本框的值改变而改变

Question

javascript 一个文本框的值如何根据另一个文本框的值改变而改变，
比如： 文本框1 输入的为 12345 ，文本框2原本的值为"789"，然后再把文本框1 的值12345 给加上去，文本框2的值为78912345,当文本框1的值12345 删除后，文本框2 的值应该显示为 789 ，我要实现这个效果，不知道我描述清楚了没。。

Answer 1

<br> window.onload=function(){</p> <pre><code> if(document.getElementById(&quot;2&quot;).value != &#39;undefined&#39;){ document.getElementById(&quot;3&quot;).value = document.getElementById(&quot;2&quot;).value; } } function changeValue(){ var a = document.getElementById(&quot;1&quot;); var b = document.getElementById(&quot;3&quot;); var c = document.getElementById(&quot;2&quot;); c.value = b.value+a.value; } function updateValue(){ if(document.getElementById(&quot;2&quot;).value != &#39;undefined&#39;){ document.getElementById(&quot;3&quot;).value = document.getElementById(&quot;2&quot;).value; } } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;input type=&quot;hidden&quot; id=&quot;3&quot; value=&quot;&quot; /&gt; 1:&lt;input type=&quot;text&quot; id=&quot;1&quot; name =&quot;1&quot; onchange=&quot;changeValue();&quot; value=&quot;&quot; /&gt;&lt;br/&gt; 2:&lt;input type=&quot;text&quot; id=&quot;2&quot; name=&quot;2&quot; onchange=&quot;updateValue();&quot; value=&quot;789&quot; /&gt; &lt;/body&gt; </code></pre> <p></html></p>

Answer 2

var input1pre; $(function(){ $('#input1').change(function(){ var val1 = $(this).val(); var val2 = $('#input2').val(); if(typeof input1pre != 'undefined') { val2 = val2.substring(0, val2.lastIndexOf(input1pre)); } input1pre = val1; $('#input2').val(val2 + val1); }); });

Answer 3

监听文本框的 change事件咋第二个change事件中，获取第二个文本框的值，赋值给第一个文本框。

Answer 4

效果看这里:
http://jsfiddle.net/26RGG/7/

代码:
html:
[code="html"]

​
[/code]

javascript:
[code="javascript"]
$(document).ready(function() {
$('#ipt-edit').keydown(function(e) {
var key = e.keyCode;

    // 过滤非数字键
    // 8 是 backspace
    if( (key < 48 || key > 57) && key != 8) {
        // is not a number or backspace key
        return false;
    }

    // 处理backspace
    if(key == 8) {
        var origin = $('#ipt-target').val();
        var end = origin.slice(0, origin.length - 1);

        $('#ipt-target').val(end);
        return true;
    }

    // 处理按下的数字
    var targetVal = $('#ipt-target').val();
    var result = [targetVal, key - 48].join('');

    $('#ipt-target').val(result);
});

});​
[/code]

Answer 5

之前的当#ipt-edit为空的时候， 再按backspace会有问题:
新版本看这里:

[url]http://jsfiddle.net/26RGG/7/[/url]

[code="javascript"]
$(document).ready(function() {
$('#ipt-edit').keydown(function(e) {
var key = e.keyCode;

    // 过滤非数字键
    // 8 是 backspace
    if( (key < 48 || key > 57) && key != 8) {
        // is not a number or backspace key
        return false;
    }

    // 处理backspace
    if(key == 8) {
        var origin = $('#ipt-target').val();
        var end = origin.slice(0, origin.length - 1);

        $('#ipt-target').val(end);
        return true;
    }

    // 处理按下的数字
    var targetVal = $('#ipt-target').val();
    var result = [targetVal, key - 48].join('');

    $('#ipt-target').val(result);
});

});​
[/code]

Answer 6

[code="html"]
​
<br> var input1pre; <br> function changeValue() {<br> var val1 = document.getElementById(&#39;input1&#39;).value;<br> var val2 = document.getElementById(&#39;input2&#39;).value;<br> if(typeof input1pre != &#39;undefined&#39;) {<br> val2 = val2.substring(0, val2.lastIndexOf(input1pre));<br> }<br> input1pre = val1;<br> document.getElementById(&#39;input2&#39;).value = val2 + val1;<br> }<br> [/code]

Answer 7

Presuming:

1, Text2 input is readonly.
2, Not limitted inputing number only.

Then you can see this: http://jsfiddle.net/YGG3X/4/

Answer 8

:idea: