Question

标题描述的确切内容。

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

我尝试过使用getelementsbyclassname，但它似乎不适用于多个textareas。

更新多个textarea的多个输入的简单示例就足够了。

这是我到目前为止所做的，而且还不完整。

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

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

注意您需要的主要功能是jQuery＆＃39; eq()

＆＃13;

$('#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);
  });

＆＃13;

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

＆＃13;

<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

＆＃13;

多个输入更新多个textarea

1 个答案: