【问题标题】:JS - Dynamically change TextfieldJS - 动态更改文本字段
【发布时间】:2012-04-27 23:33:12
【问题描述】:

我正在尝试将一个文本字段中的值从另一个文本字段的值更改为没有任何提交。示例:

[文本字段 1(输入“你好”)]

[文本字段 2(此处也插入了“hello”)]

下面是我的表格:

<form action="#" id="form_field">
   <input type="text" id="textfield1" value="">
   <input type="text" id="textfield2" value="">
</form>

我对 JavaScript 了解不多,这可能吗?将不胜感激。

谢谢

【问题讨论】:

  • 为什么这被给予负面评价?请在这里评论我的问题有什么问题,我会尽力改进它。给出负面评价并且不费心留下反馈是没有意义的......这对任何人都没有帮助。

标签: javascript forms dynamic input


【解决方案1】:

您可以使用jQuery 来完成此操作,正如@sarwar026 提到的那样,但他的回答存在一些问题。你可以用 jQuery 用这个代码来做:

$('#textfield1').blur(function() { 
    $("#textfield2").val($("#textfield1").val());
}​);​

为了使用 jQuery,您需要将它包含在您的页面中,在您的脚本之前。

【讨论】:

    【解决方案2】:

    如果你想用jquery来做,那么请添加以下脚本

    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    

    然后编写如下代码:

    $("#textfield1").bind("input", function() {
        $("#textfield2").val($("#textfield1").text());
    }
    

    【讨论】:

    • 可能要向 OP 说明您的解决方案需要 jQuery。
    【解决方案3】:

    你可以这样做:

    HTML:

    <form action="#">
        <input type="text" id="field" value="" onChange="changeField()">
    </form>
    

    JS:

    function changeField() {
        document.getElementById("field").value="whatever you want here";
    }
    

    有时这行不通。所以你需要使用micha的解决方案:

    <form action="#" id="form_field">
       <input type="text" id="textfield1" value="" onChange="document.getElementById('textfield2').value=this.value">
       <input type="text" id="textfield2" value="">
    </form>
    

    jsFiddle 中查看此解决方案

    你可以阅读更多关于.valuehere的信息。

    希望这会有所帮助!

    【讨论】:

      【解决方案4】:
      <form action="#" id="form_field">
         <input type="text" id="textfield1" value="" onKeyUp="document.getElementById('textfield2').value=this.value">
         <input type="text" id="textfield2" value="">
      </form>
      

      查看实际情况: http://jsfiddle.net/4PAKE/

      【讨论】:

      • 这很好用,但它只会在我单击该字段后更改值。是否可以实时更改文本字段 2 中的值?谢谢
      • 将其连接到onKeyUp
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-01-07
      • 2023-04-03
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多