如何控制h3标签内HTML输入的输出。 [英] How do I control the output of HTML input inside of a h3 tag.
本文介绍了如何控制h3标签内HTML输入的输出。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在创建某种应用程序。
您应该能够输入标题，描述等。
然后插入的文本应该转换为在我的CSS中配置的particulair样式。
问题：如何创建输入字段。输入文字按回车键，然后在h3标签之间张贴文字。
我尝试过：
我已经通过javascript创建了一个提示符号。但由于提示很不方便我想做别的事情。只是一个输入类型的文本字段，然后按下并插入文本并通过CSS转换。
<！DOCTYPE html>
< html>
< head>
< title> Adwords Applicatie< / title>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js>< / script>
<！ - 样式的开头 - >
< style>
#input1 {
宽度：600px;
身高：75px;
border：solid black 1px;
margin-top：20px;
填充：0px;
}
h3 {
padding：0px;
保证金：0px;
font-family：arial，sans-serif;
颜色：＃1a0dab;
text-align：left;
cursor：pointer;
字体大小：18px;
}
p {
color：rgb（0,102,33）;
字体大小：14px;
font-style：normal;
身高：汽车;
宽度：auto;
text-align：left;
display：block;
font-weight：400px;
line-height：16px;
填充：0px;
保证金：0px;
font-family：arial，sans-serif;
white-space：nowrap;
cursor：pointer;
}
.text {
color：rgb（84,84,84）;
字体大小：13px;
font-family：arial，sans-serif;
text-align：left;
自动换行：break-word;
font-weight：400;
行高：18.2px;
显示：内联;
保证金：0px;
填充：0px;
}
< / style>
<！ - 样式结束 - >
< / head>
< body>
< div id =inputWrapper>
<！ - 最多160 karakters in beschrijving - >
< div id =input1>
< h3>制作动态展示广告 - AdWords帮助 - Google支持< / h3>
< p> https://support.google.com/adwords/answer/3265299?hl = zh< / p>
< span class =text>本文仅适用于之前的AdWords体验。
确定...要获得最大范围，请制作响应式动态展示广告。
自适应广告可以..< / span>
< / div>
< div id =input1>
< h3 id =tekst1>< / h3>
< p id =p1>< / p>
< span id =span1class =text>< / span>
< / div>
< div id =input1>
< h3 id =tekst2>< / h3>
< p id =p2>< / p>
< span id =span2class =text>< / span>
< / div>
< div id =input1>
< h3 id =tekst3>< / h3>
< p id =p3>< / p>
< span id =span3class =text>< input type =text>< / span>
< / div>
< / div>
<！ - 在这里添加javscript - >
< script>
var Adv1 = document.getElementById（tekst1）;
var Adv1p1 = document.getElementById（p1）;
var Adv2 = document.getElementById（tekst2）;
var Adv2p2 = document.getElementById（p2）;
var Adv3 = document.getElementById（tekst2）;
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（Wat is de Titel，Voer hier uw titel in）;
var Advertentie2 = Adv2.textContent + = prompt（Wat is de Titel，Voer hier uw titel in）;
var p2 = Adv2p2.textContent + = prompt（Wat is de Titel，Voer hier uw titel in）;
var Advertentie3 = Adv3.textContent + = prompt（Wat is de Titel，Voer hier uw titel in）;
var p3 = Adv3p3.textContent + = prompt（Wat is de Titel，Voer hier uw titel in）;
< / script>
< / body>
< / html>
解决方案
您可以使用< textarea>或< input>元件。你必须给它一个标识，这样你就可以通过javaScript检索它的值。虽然通常在< form>中使用，但它们不必在该上下文中使用。
您还需要决定什么事件将触发移动文本。一个带有onclick事件的按钮[就像输入（）一样不方便]，onblur？后者可能很烦人，但它确实保存了按钮点击。
在javascript中的
：
document.getElementById（'idofh3'）。innerHTML = document.getElementById（'idofinput'）。value;
由按钮上的单击事件触发，该按钮应位于事件处理程序中，不是内联的。
如果你想要它真的很动态，你可以在事件处理程序的输入上使用keyup事件，然后它会随每个键击更新。
I am creating some kind of application.
You should be able to put in the title, the description etc.
And then the inserted text should convert to a particulair style configured in my css.
Question: How do i make an input field. Enter the text press enter and then the text wil be posted between the h3 tags.
What I have tried:
I have created a prompt through javascript wich does what i want. but since the prompt is pretty inconveniant i want to do something else. just an input type text field and then after you press and the text get inserted and converted through CSS.
<!DOCTYPE html>
<html>
<head>
<title>Adwords Applicatie</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<!-- beginning of style -->
<style>
#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;
}
</style>
<!-- end of style -->
</head>
<body>
<div id="inputWrapper">
<!-- max 160 karakters in beschrijving -->
<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>
<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"><input type="text"></span>
</div>
</div>
<!-- add javscript here -->
<script>
var Adv1 = document.getElementById("tekst1");
var Adv1p1 = document.getElementById("p1");
var Adv2 = document.getElementById("tekst2");
var Adv2p2 = document.getElementById("p2");
var Adv3 = document.getElementById("tekst2");
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("Wat is de Titel","Voer hier uw titel in");
var Advertentie2 = Adv2.textContent += prompt("Wat is de Titel","Voer hier uw titel in");
var p2 = Adv2p2.textContent += prompt("Wat is de Titel","Voer hier uw titel in");
var Advertentie3 = Adv3.textContent += prompt("Wat is de Titel","Voer hier uw titel in");
var p3 = Adv3p3.textContent += prompt("Wat is de Titel","Voer hier uw titel in");
</script>
</body>
</html> 解决方案
You could use a <textarea> or <input> element. You have to give it an identity so you can retrieve it's value via javaScript. Although normally used in <form>'s, they don't have to be used in that context.
You then need, as well, to decide what event will trigger moving the text. A button with an onclick event [just as inconvenient as input()], onblur ? The latter could be annoying, but it does save the button click.
in javascript:
document.getElementById('idofh3').innerHTML=document.getElementById('idofinput').value;
triggered by a click event on a button which should be in an event handler, not inline.
If you want it really dynamic they you could use the keyup event on the input for the eventhandler, and then it would update with each key stroke.
这篇关于如何控制h3标签内HTML输入的输出。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
