字符串输入自动进入只读字段答案

【问题标题】：String input automatically entered into readonly field字符串输入自动进入只读字段
【发布时间】：2013-05-16 12:30:43
【问题描述】：

是否可以将以前输入的字段中的输入复制到另一个不可编辑的 javascript 字段中？例如，您有两个姓名字段，第一个字段您必须输入您的姓名，一旦输入，姓名将自动复制到不可编辑的第二个文本字段中。我已经做了一些搜索，但我似乎找不到任何对这种特定情况有用的东西，而且我对 javascript 非常了解，所以任何形式的帮助或朝着正确方向轻推都会很棒。

【问题讨论】：

“不可编辑”是什么意思？如，它有一个readonly 属性？通过id 获取元素并获取/设置它们的适当value 属性
如果你有 2 个 id，每个文本字段一个，你可以做 document.getElementById('inputone').value = document.getElementById('inputtwo').value
有可能。使用 jQuery jsfiddle.net/j08691/WFvU9 很容易
@Ian 是的！抱歉 readonly 是我要找的词。
@j08691 在 jsfiddle 中似乎可以正常工作，但是当我尝试将其添加到我自己的代码中时它不起作用，应该介于两者之间吗？

标签： javascript readonly

【解决方案1】：

是的，您可以，只需执行以下操作：

document.getElementById('non_editable_name').value = document.getElementById('editable_name').value;

如果你使用jquery，你可以这样做：

$('#non_editable_name').val($('#editable_name').val());

【讨论】：

【解决方案2】：

像这样：

   <!DOCTYPE html>
    <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=windows-1250">
      <meta name="generator" content="PSPad editor, www.pspad.com">
      <title></title>
      <script>
      function copianome(nome){
        document.getElementById('ds_name_result').value = nome;
      }
      </script>
      </head>
      <body>
        <input type="text" id="ds_name" onkeyup="copianome(this.value)" /><br />
        <input type="text" id="ds_name_result" readonly="readonly" />
      </body>
    </html>

【讨论】：

【解决方案3】：

只需使用您输入的 keyup 侦听器：

<input type="text" id="input1" />
<input type="text" id="input2" readonly='readonly' />

var $input2 = document.getElementById('input2');
var $input1 = document.getElementById('input1');
$input1.addEventListener('keyup', function()
{
  $input2.value = $input1.value;
});

这里是示例：fiddle

【讨论】：

它可以在 jsfiddle 中找到，但是当我在自己的代码中尝试它时它不起作用，是否应该在某些东西之间添加它？
哦，等一下，我搞定了，刚刚添加了 window.onload = function(event)，非常感谢您的帮助！

【解决方案4】：

这是fiddle。您可以使用jQuery 和代码来做到这一点：

$(function () {
    $('#nameInput').change(function () {
        $('#secondInput').val($(this).val());
    });
});

与：

<input id="nameInput" type="text"/><br />
<input id="secondInput" type="text" readonly/>

【讨论】：

你假设 OP 正在使用 jQuery。

【解决方案5】：

HTML

<input type="text" id="entry" />
<input type="hidden" id="storage" />

JS

(function() {

    $('#entry').on('change', function() { $('#storage').val(this.value); });

})();

【讨论】：

假设 OP 正在使用jQuery。另外，“隐藏”输入字段的意义何在？