Question

我想使用多个文本字段在文本区域中显示文本。 Check out this link;在左侧有许多输入字段，此输入值显示在文本区域中。我正在尝试使用keyup事件。

这是我的代码：

<script>
    $('#name').keyup(function () {$('#fname').text($(this).val());'</br>'});
</script>

<script>
    $('#field').keyup(function () {$('.sname').text($(this).val());});
</script>

该功能正常，但在文本字段中写入第二个名称时，它会覆盖第一个输入。Check full my code live

Answer 1

这是我的解决方案：

而不是使用key-up事件使用模糊，以便当第二个文本框失去焦点时，您会得到理想的结果：

声明一个全局变量txt，然后在第一个文本框模糊事件中为其赋值，同时向其附加模糊（焦点丢失）事件的第二个文本框的值。

key-up不适合你的原因是，最终你需要在两个文本框中附加文本，而第一个文本框将完全正常但第二个文本的键入-box将使用换行符继续在每个键盘上附加文本。

如果关键事件不是您的首要任务，那么这样的事情对您有用：

var txt ='';

$('#name').blur(function () {
    if ($('#field').val().length > 0){
        txt = $(this).val() + '\n' + $('#field').val();
    } else {
        txt = $('#name').val();
    }   
  $('#fname').text(txt);  
});
$('#field').blur(function () {
    txt = '';
    txt = $('#name').val() + '\n' + $(this).val();
  $('.sname').text(txt);
});

工作小提琴：http://jsfiddle.net/5xHyY/

更新

它现在更加同步。基本上一秒文本框模糊清除txt变量并再次分配值。检查还包括第一个文本框模糊。更新了jsfiddle：http://jsfiddle.net/5xHyY/4/

如果您仍希望整个过程基于键入/关闭事件。您必须使用多个DIVs而不是单个TextArea

将输入文本显示在文本区域中

1 个答案:

更新