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

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

leefay
leefay 文本框2可以输入?
7 年多之前 回复

8个回答



<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>

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

weixin_42502209
weixin_42502209 直接上代码。
7 年多之前 回复


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); }); });
pangxin001
pangxin001 改成keyup可以
7 年多之前 回复
pangxin001
pangxin001 struts和jquery没多大关系吧。用jquery主要是方便使用change事件,要不自己的处理浏览器兼容性,不过自己可以改成js,动手吧。。
7 年多之前 回复
witcheryne
witcheryne struts 标签也能给id 或者 classId 这些属性。 change 事件只有当 blur的时候才会被触发, 用 keypress 好点
7 年多之前 回复
weixin_42502209
weixin_42502209 能不能用javaScript 实现呢,不用jquery,我的文本框是struts 标签
7 年多之前 回复

效果看这里:
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]

witcheryne
witcheryne 你的意思是: #ipt-edit 输入 123, 之后 #ipt-target 应该是 789123 。如果再编辑#ipt-target 为 78912300, 此时再编辑 #ipt-edit, 值改成 1。 #ipt-target 的值应该是 789100 ? 是这个意思么?
7 年多之前 回复
witcheryne
witcheryne 看这个最新的, http://jsfiddle.net/26RGG/9/
7 年多之前 回复
weixin_42502209
weixin_42502209 在第二个文本框输入值后,再在第一个文本框输入值后再删除,第一个文本框的值没有在第2个文本框清除。
7 年多之前 回复
weixin_42502209
weixin_42502209 貌似不是我想要的效果啊
7 年多之前 回复

之前的当#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]

witcheryne
witcheryne 我嚓! 代码也贴错了! 看链接吧
7 年多之前 回复
witcheryne
witcheryne 代码是对的, 链接贴错了 http://jsfiddle.net/26RGG/9/
7 年多之前 回复

[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]

Presuming:

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

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

:idea:

zhuzhenlong
zhuzhenlong <html> <head> <script> window.onload=function(){ if(document.getElementById("2").value != 'undefined'){ document.getElementById("3").value = document.getElementById("2").value; } } function changeValue(){ var a = document.getElementById("1"); var b = document.getElementById("3"); var c = document.getElementById("2"); c.value = b.value+a.value; } function updateValue(){ if(document.getElementById("2").value != 'undefined'){ document.getElementById("3").value = document.getElementById("2").value; } } </script> </head> <body> <input type="hidden" id="3" value="" /> 1:<input type="text" id="1" name ="1" onchange="changeValue();" value="" /><br/> 2:<input type="text" id="2" name="2" onchange="updateValue();" value="789" /> </body> </html> 新建个html页面,把上面源码贴上去试试(我本机测试过,应该是你要的效果)
7 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐