多个输入更新多个文本区域

Question

正是标题描述的内容。

我想要一组 6/7 输入字段能够为不同的模板更新 4/5 不同的文本区域以使用输入元素复制粘贴。

我试过使用 getelementsbyclassname 但它似乎不适用于多个文本区域。

多个输入更新多个文本区域的简单示例就足够了。

这是我目前所掌握的，还不完整。

1 name: <input type="text" name="1stTarget" onblur="tst1(this);" /><br />
2 name: <input type="text" name="2ndTarget" onblur="tst1(this);" /><br />
Email address: <input type="text" name="3rdTarget" onblur="tst1(this);" /><br />
Phone #: <input type="text" name="4thTarget" onblur="tst1(this);" /><br />
Schedule: <input type="text" name="5thTarget" onblur="tst1(this);" /><br />
<textarea name="result" id="result1" onClick="this.select();" class="disable">Hello 1stTarget, 2ndTarget i would like to confirm your email address 3rdTarget and phone # 4thTarget and the time you will be at work 5thTarget</textarea>
<br />
<textarea name="result2" id="result2" onClick="this.select();" class="disable">1stTarget and 2ndTarget updated their 5thTarget and their 4thTarget including their 3rdTarget</textarea><input type="reset" value="Reset!" />

使用

<script type="text/javascript">
function tst1(elm){
    var trgt=document.getElementById('result1');
    trgt.value=trgt.value.replace(elm.getAttribute('name'), elm.value);
}
</script>

Answer 1

如果我是你，我不会尝试替换文本区域中的文本，而是简单地从你的输入中构建你需要的字符串，并在完成后设置文本。像下面这样的东西可以工作：

注意你需要的主要功能是jQuery的eq()

$('#fill').click(function(elm) {
    var hasErrors=false;
    var $updateElms=$('.update');
    $updateElms.removeClass('hasError');
    $updateElms.each( function(i,e){
        if($(e).val()==''){
          hasErrors=true;
          $(e).addClass('hasError');
        }
    });
    if(hasErrors) return;
    var name1 = $updateElms.eq(0).val();
    var name2 = $updateElms.eq(1).val();
    var email = $updateElms.eq(2).val();
    var phone = $updateElms.eq(3).val();
    var schedule = $updateElms.eq(4).val();
     
    var text0 = 'Hello '+name1+', '+name2+' I would like to confirm your email address '+email+' and phone # '+phone+' and the time you will be at work '+schedule;
    var text1 = 'Hi '+name1+', '+name2+' we have recieved your confirmation that your email address is '+email+' and phone # is '+phone+' and that you will be at work '+schedule;
    var text2 = 'Hello '+name1+', '+name2+' we have attempted to reach you via your email address '+email+' and phone # '+phone+' to advise that you missed your shift at '+schedule;
  
    $('.result:eq(0)').val(text0);
    $('.result:eq(1)').val(text1);
    $('.result:eq(2)').val(text2);
  });

.hasError{
    color:red;
    background-color:#F9B9B9;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

1 name:
<input type="text" class="update"/>
<br />
2 name:
<input type="text" class="update"/>
<br />
Email address:
<input type="text" class="update"/>
<br />
Phone #:
<input type="text" class="update"/>
<br />
Schedule:
<input type="text" class="update"/>
<br />
<input type="button" id="fill" value="Fill Textareas"/>
<br />
<textarea name="result" class="disable result"></textarea>   
<br />
<br />
<textarea name="result" class="disable result"></textarea> 
<br />
<br />
<textarea name="result" class="disable result"></textarea>                                                 
<br />
<input type="reset" value="Reset!" />using

多个输入更新多个文本区域

Multiple inputs update multiple textarea's

javascript

jquery

textarea

input