Question

我希望你能帮助我。

我已创建，因为您可以将其称为模板。现在我想要的是通过输入字段向该模板添加文本。

例如：

<h3>i want to input text here</h3>
<input type="text>
<button>Add Title</button>

我让它工作但不是我想要的方式。我正在使用prompt（）; 如果您复制代码，您将看到它必须是什么样的样本。但是用户应该能够在自己的文本中复制粘贴/类型，而不是可以使用prompt（），因为当我打开另一个窗口时它也会关闭。所以我想要手动输入文本并保留我的CSS和样式。

这是我的代码：

/*function go() {
      var Adv1 = document.getElementById("tekst1");
      var Adv1p1 = document.getElementById("p1");
      var Advertentie1    = Adv1.textContent += var text = document.getElementById("name").value;
      var p1              = Adv1p1.textContent
    }
    */


var Adv1 = document.getElementById("tekst1");
var Adv1p1 = document.getElementById("p1");
var adv1s1 = document.getElementById("span1");


//var Adv2 = document.getElementById("tekst2");
//var Adv2p2 = document.getElementById("p2");


//var Adv3 = document.getElementById("tekst3");
//var Adv3p3 = document.getElementById("p3");


var Connect = new XMLHttpRequest();

var Advertentie1 = Adv1.textContent += prompt("Wat is de Titel", "Voer hier uw titel in");
var p1 = Adv1p1.textContent += prompt("Url-pagina", "Voer hier uw url in");
var smalltextspan = adv1s1.textContent += prompt("description", "add your description here");

//var Advertentie2    = Adv2.textContent    +=  prompt("Wat is de Titel","Voer hier uw titel in");
//var p2              = Adv2p2.textContent  +=  prompt("Url-pagina","Voer hier uw url in");

//var Advertentie3    = Adv3.textContent    +=  prompt("Wat is de Titel","Voer hier uw titel in");
//var p3              = Adv3p3.textContent  +=  prompt("Url-pagina","Voer hier uw url in");

#input1 {
  width: 600px;
  height: 75px;
  border: solid black 1px;
  margin-top: 20px;
  padding: 0px;
}

h3 {
  padding: 0px;
  margin: 0px;
  font-family: arial, sans-serif;
  color: #1a0dab;
  text-align: left;
  cursor: pointer;
  font-size: 18px;
}

p {
  color: rgb(0, 102, 33);
  font-size: 14px;
  font-style: normal;
  height: auto;
  width: auto;
  text-align: left;
  display: block;
  font-weight: 400px;
  line-height: 16px;
  padding: 0px;
  margin: 0px;
  font-family: arial, sans-serif;
  white-space: nowrap;
  cursor: pointer;
}

.text {
  color: rgb(84, 84, 84);
  font-size: 13px;
  font-family: arial, sans-serif;
  text-align: left;
  word-wrap: break-word;
  font-weight: 400;
  line-height: 18.2px;
  display: inline;
  margin: 0px;
  padding: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="inputWrapper">


  <!-- max 160 characters in description -->
  <div id="input1">
    <h3>Create dynamic display ads - AdWords Help - Google Support </h3>
    <p>https://support.google.com/adwords/answer/3265299?hl=en </p>
    <span class="text">This article only applies to the previous AdWords experience.
            Determine ... For the greatest reach, create responsive dynamic display ads.
            Responsive ads can ..</span>
  </div>

  <div id="input1">
    <h3 id="tekst1"></h3>
    <p id="p1"></p>
    <span id="span1" class="text"></span>
  </div>

  <!--Name: <input id="name" type="text">
        <button onclick="go()">Go</button>
        -->

  <div id="input1">
    <h3 id="tekst2"></h3>
    <p id="p2"></p>
    <span id="span2" class="text"></span>
  </div>


  <div id="input1">
    <h3 id="tekst3"></h3>
    <p id="p3"></p>
    <span id="span3" class="text"></span>
  </div>

</div>

Answer 1

如果我不正确，我为你做了fiddle 如果我错了，请告诉我更多细节并清楚你想做什么

    <label for="title">title</label>
<input id="title"/>
<br>
<label for="description">description</label>
<input id="description"/>


<h3 id="title-replace">
replace me please
</h3>

<h3 id="description_rep">
replace me please
</h3>

和jquery代码：

$("#title").on('change input',function(){
$('#title-replace').html($(this).val());
})

$("#description").on('change input',function(){
$('#description_rep').html($(this).val());
})

css：

label[for="title"]{
  color:red;
}
#title-replace{
  color:green;
}

Answer 2

@arya ag解决了这个问题，谢谢！：）

如果我不正确的话，我为你做了这个小提琴，如果我错了，请告诉我更多细节并清楚你想做什么

 <label for="title">title</label>
<input id="title"/>
<br>
<label for="description">description</label>
<input id="description"/>


<h3 id="title-replace">
replace me please
</h3>

<h3 id="description_rep">
replace me please
</h3>
and jquery code:

$("#title").on('change input',function(){
$('#title-replace').html($(this).val());
})

$("#description").on('change input',function(){
$('#description_rep').html($(this).val());
})
the css:

label[for="title"]{
  color:red;
}
#title-replace{
  color:green;
}

通过输入字段将文本添加到h3 / p / span

2 个答案: