首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何同步两个文本框表单值?

如何同步两个文本框表单值?
EN

Stack Overflow用户
提问于 2011-09-22 22:06:05
回答 5查看 17K关注 0票数 24

大家好,我是jQuery的新手。假设我有两个HTML文本框。如果我在文本框A中写入,那么相同的值将转到文本框B,如果我在B中写入,那么它将转到A,并与删除文本相同。在jQuery中如何做到这一点呢?

EN

回答 5

Stack Overflow用户

发布于 2011-09-22 22:09:12

这很简单:

代码语言:javascript
复制
$("#textBoxA").keyup(function(){
   $("#textBoxB").val($("#textBoxA").val());
});

$("#textBoxB").keyup(function(){
   $("#textBoxA").val($("#textBoxB").val());
});
票数 5
EN

Stack Overflow用户

发布于 2011-10-23 12:50:01

一种比最受欢迎的答案更有效的方法是:

代码语言:javascript
复制
var $inputs = $(".copyMe");  
$inputs.keyup(function () {
     $inputs.val($(this).val());
});

http://css-tricks.com/snippets/jquery/keep-text-inputs-in-sync/

票数 4
EN

Stack Overflow用户

发布于 2016-12-22 22:59:32

我今天遇到了这个挑战。我做了一个小插件,使代码更具可读性,并处理文本输入,但也选择了fe。

当包含插件时,您可以简单地使用$("selector").keepInSync($("otherselector"));

代码语言:javascript
复制
$.fn.keepInSync = function($targets) {
  // join together all the elements you want to keep in sync
  var $els = $targets.add(this);
  $els.on("keyup change", function() {
    var $this = $(this);
    // exclude the current element since it already has the value
    $els.not($this).val($this.val());
  });
  return this;
};

//use it like this
$("#month1").keepInSync($("#month2, #month3"));
$("#text1").keepInSync($("#text2"));
代码语言:javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Two way sync</h1>
<select id="month1">
  <option value="">Please select a moth</option>
  <option value="jan">January</option>
  <option value="feb">February</option>
  <option value="mar">March</option>
</select>
<select id="month2">
  <option value="">Please select a moth</option>
  <option value="jan">1</option>
  <option value="feb">2</option>
  <option value="mar">3</option>
</select>
<select id="month3">
  <option value="">Please select a moth</option>
  <option value="jan">Jan</option>
  <option value="feb">Feb</option>
  <option value="mar">Mar</option>
</select>
<br>
<input type="text" id="text1">
<input type="text" id="text2">

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/7516083

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档