javascript - 输入填充文本区域 - Javascript

Question

我正在制作一个优惠券代码页，我对一件事感到震惊，也许这对 javascript friend 来说很容易。问题是

• 所有输出链接都在一行中，我希望每个链接位于不同的文本区域中，并且能够从文本区域复制

HTML 标记

   <p>Enter your email or User ID 
       <input type="text" name="foo" id="foosite" value="" />
   </p>

  <a href="#" id='link' target="_blank">send</a>
  <div id="url_value"></div>

Javscript 代码

var a = document.getElementById('link')
a.onclick = function(e){
    e.preventDefault();
    var value = document.getElementById('foosite').value;
    var route = "http://www.domain.com/route.php?email=" + value + ',  ';
    var data = "http://www.domain.com/data.php?email=" + value + ',  ';
    var form = "http://www.domain.com/form.php?email=" + value;

    document.getElementById('url_value').innerHTML = route + data + form
}

从上面的代码来看，它在一行中生成所有链接，看起来很丑，我需要它在 3 个不同的文本区域中显示。

喜欢这个 Html

<p>Link 1</p>
<textarea name="route"> Output Link</textarea> 

<p>Link 2</p>
<textarea name="data"> Output Link</textarea> 

<p>Link 3</p>
<textarea name="form"> Output Link</textarea> 

Answer 1

您的代码的问题是这一行:

document.getElementById('url_value').innerHTML = route + data + form;

您正在做的是将所有链接作为一行注入(inject) DOM，它们之间没有空格。

解决方案是为结果创建一个 View ，然后将它们注入(inject)到 DOM 中，如下所示:

var a = document.getElementById('link')

a.onclick = function(e){
    e.preventDefault();

    var value = document.getElementById('foosite').value;
    var routeLink = "http://www.domain.com/route.php?email=" + value + ',  ';
    var dataLink = "http://www.domain.com/data.php?email=" + value + ',  ';
    var formLink = "http://www.domain.com/form.php?email=" + value;

    var routeView = '<p>Link 1</p><textarea name="route">'+routeLink+'</textarea>';
    var dataView = '<p>Link 2</p><textarea name="data">'+dataLink+'</textarea>';
    var formView = '<p>Link 3</p><textarea name="form">'+formLink+'</textarea>';

    document.getElementById('url_value').innerHTML = routeView + dataView + formView;
}

<小时/>

更新:

如果 HTML 已存在，请将 ID 添加到文本区域字段。

<p>Link 1</p>
<textarea id="routeValue" name="route"> Output Link</textarea> 

<p>Link 2</p>
<textarea id="dataValue" name="data"> Output Link</textarea> 

<p>Link 3</p>
<textarea id="formValue" name="form"> Output Link</textarea> 

用以下代码替换你的 JS:

var a = document.getElementById('link')

a.onclick = function(e){
    e.preventDefault();

    var value = document.getElementById('foosite').value;
    var routeLink = "http://www.domain.com/route.php?email=" + value + ',  ';
    var dataLink = "http://www.domain.com/data.php?email=" + value + ',  ';
    var formLink = "http://www.domain.com/form.php?email=" + value;

    document.getElementById('routeValue').innerHTML = routeLink;
    document.getElementById('dataValue').innerHTML = dataLink;
    document.getElementById('formValue').innerHTML = formLink;
}