如何显示用户在标签中写入的输入文本

how to display input text that user has writen in a label

本文关键字：文本 输入 标签 何显示 显示 用户      更新时间：2023-09-26

我想在输入文本中显示用户的内容。我必须像下面这样的表单，在第二个表单上，我想在标签上显示用户在输入部分的内容。但是我该怎么做...

第一种形式：

<form name="password" onsubmit="return Validate()" method="post" id="password" action="#"  >
               <label for="firstname">*First Name:</label>
               <input type="text" name="firstname" id="firstname1"  class="textinput"  required="required" onchange="firstnamecheck1()"><br>

第二种形式：

 <form name="displaylabel" method="post" id="password" action="#"  >
             <label>First Name:</label>&nbsp;&nbsp;<label id="l1">li.innerHTML('lastname1')</label><br>
    </form>

我该怎么做，因为我上面使用的内部 html li.innerHTML('lastname1')没有给出结果。

我使用这个函数：

<script>
 function doStuff()
{myVar = document.getElementById('lastname1');
    document.getElementById('l1').value = myvar;
}
</script>

这是表单的一部分：

<div class="hideformobile" onload="doStuff();">

        <form name="displaylabel" method="post" id="password" action="#"  >
         <label>First Name:</label>&nbsp;&nbsp;<label id="l1"></label><br>
        </form>
        </div>

但它仍然没有给出任何结果...我能做什么？请帮助我

要更改元素的HTML内容，您可以设置其innerHTML属性。

document.getElementById('my-element').innerHTML = 'test';

若要获取/设置<input>元素的值，请使用其value属性。

document.getElementById('my-input').value = 'something';

你有一个名为 firstnamecheck1 的 onchange 函数。我不知道这是做什么的，但是您可以将以下功能添加到该函数中，也可以将其添加到内联侦听器中：

<input ... onchange="firstnamecheck1(); document.getElementById('l1').innerHTML = this.value;">

但是，我更愿意使用以下内容适当地设置文本内容或内部 HTML：

setText(document.getElementById('l1'), this.value);

需要一个小的帮助程序函数来设置文本：

function setText(el, text) {
  if (typeof el.textContent == 'string') {
    el.textContent = text;
  } else if (typeof el.innerText == 'string') {
    el.innerText = text;
  }
}

<label>First Name:</label>&nbsp;&nbsp;<label id="l1">li.innerHTML('lastname1')</label><br>

这不是使用此 JavaScript 的正确方法。 您需要在函数中运行它。 如果你把它放在一个块中，比如 

<script>
function doStuff()
{
    document.getElementById('l1').innerHTML = 'lastname1';
}
</script>

当您调用 doStuff() 时，该代码将执行并更改列表项元素的 innerHTML 属性。 您也可以在页面或正文加载上调用此类函数。

<body onload="doStuff();"> (more content) </body>

相关文章：