Question

这是我的表单示例：

<form action="" method="POST">
    <input type="text" name="firstTarget" />
    <input type="text" name="secondTarget" />
    <input type="text" name="thirdTarget" />
    <textarea name="result">I have this text and I want to update it using firstTarget. After that I want to use secondTarget and thirdTarget</textarea>
</form>

我希望通过将firstTarget，secondTarget和thirdTarget替换为firstTarget，secondTarget和thirdTarget输入中的实际值来实时更新我的textarea值。

Answer 1

HTML：

<form action="" method="POST">
    <input type="text" name="firstTarget" onblur="tst(this);" />
    <input type="text" name="secondTarget" onblur="tst(this);" />
    <input type="text" name="thirdTarget" onblur="tst(this);" />
    <textarea style="width:500px; height: 100px;" name="result">I have this text and I want to update it using firstTarget. After that I want to use secondTarget and thirdTarget</textarea>
</form>

和javascript：

function tst(elm){
    var trgt=document.getElementsByTagName('textarea')[0];
    trgt.value=trgt.value.replace(elm.getAttribute('name'), elm.value);
}

工作jsfiddle demo here

修改
如果您想要像firstTarget那样更新针的多个实例，那么您需要动态创建正则表达式，以便将全局标记传递给它。

function tst(elm){ var trgt=document.getElementsByTagName('textarea')[0]; trgt.value=trgt.value.replace(RegExp(elm.getAttribute('name'), 'g'), elm.value); }

工作jsfiddle demo here

Answer 2

您可以这样做：

/* cache original value so we keep the keywords*/
var txt=$('textarea').val();


$('input').keyup(function(){
   var newText=txt;
    newText=newText.replace( this.name, this.value);    
    $('textarea').val(newText);    
});

然而，一个问题是如果textarea没有设置为只读并且用户更改其中的任何内容，则这将无法工作，因为它依赖于存储原始值并更改它。需要了解有关此设置的用例的更多信息，以帮助进一步推进它。

如果用户触摸任何关键字都将失败，其他解决方案中也存在同样的问题

的 DEMO

这是一个将输入值存储在每个键盘上的解决方案，因此用户也可以编辑textarea。

$('input').keyup(function(){ /* value to be replaced is stored in data object*/ var regVal=$(this).data('replace'); var newText=$('textarea').val().replace( regVal, this.value); /* store value that will get replaced*/ $(this).data('replace', this.value) $('textarea').val(newText); }).each(function(){ /* on page load set initial replacement value as name of input*/ $(this).data('replace', this.name); });

唯一的限制是假设用户没有重复的条目

的 DEMO

Answer 3

您可以使用此代码执行此操作：

$('firstTarget').onChange(function(){
      var str =  $('result').val();
      str.replace(firstTarger, $( this ).attr('name'));
      $('result').text(str);
 }):

 $('secondTarget').onChange(function(){
      var str =  $('result').val();
      str.replace(firstTarger, $( this ).attr('name'));
      $('result').text(str);
 }):

$('thirdTarget').onChange(function(){
      var str =  $('result').val();
      str.replace(firstTarger, $( this ).attr('name'));
      $('result').text(str);
 }):

享受!!!

Textarea通过多个输入值实时更新

3 个答案: