Question

尝试将一些用户输入从一个HTML input复制到另一个，而我的控制台显示错误：Uncaught TypeError: Object #<HTMLInputElement> has no method 'val'

不确定问题是什么..我认为文本输入有值吗？谢谢你的帮助！

HTML：

<input id="a" class="answer" type="text">
<input id="af" type="text" name="a">


$('.answer').bind('keypress', function(){
    var name  = $(this).attr('id'),
        feild = $('#' + name + 'f')[0];

    feild.val($(this).val());
});

Answer 1

编辑：正如@zerkms指出的那样，无论如何都不需要[0]，但由于使用选择器的数组索引有时很有用，我会把它留在这里让你理解错误

变化：

field.val($(this).val());

到

$(field).val($(this).val());

说明：$('#' + name + 'f')获取与选择器匹配的HTML元素数组。因为你把[0]放到了数组中的第一个HTML元素。由于field是HTML元素而不是jQuery对象，因此需要使用$(field)将其转换为jQuery对象，以便在其上使用jQuery方法。

Answer 2

第一件事 - 需要添加几个额外点才能真正完成解决方案：

onkeypress事件只应在字符键按下并释放（或反复保留）时触发。
onkeydown / onkeyup事件。

reference

因此，您应该真正复制keyup上的输入文本，因为您想要包含删除操作，粘贴事件等。即使使用@ zerkms / @ waitinforatrain修复，您也只能将信息添加到第二个框中

第二件事 - 这个方法有效，但它没有我在实际网站上看到的那种快感，我想知道我是否可以得到它，所以这里。< / p>

Onkeyup / down事件没有字符信息（或者不应该），因此您无法真正使用它们来帮助加快这一过程。

我用它来摆弄（嘿）一段时间，而我提出的具有明显更快的响应时间，尽管它添加依赖项 - jcaret。

我认为没有任何重大错误，但是YMMV。另外{key}事件的browser support也是荒谬的，但希望 jQuery为你处理（我只在Chrome中测试过这个）。

$('.answer').bind('keyup', function(e){
    $('#' + $(this).attr('id') + 'f').val($(this).val());
});

$('.answer').keypress(function(e){
    var newChar = String.fromCharCode(event.which);
    var oldVal = $(this).val();
    var cursorPos = $(this).caret().start;

    var newVal = oldVal.slice(0, cursorPos) + newChar + oldVal.slice(cursorPos);

    $('#' + $(this).attr('id') + 'f').val(newVal);
});

jsfiddle

希望这有帮助！

使用jQuery将内容从一个文本域复制到另一个文本域

2 个答案: