javascript - 从占位符获取信息到标签-6ren

javascript - 从占位符获取信息到标签

转载作者：行者123 更新时间：2023-11-28 03:53:48

下面是我使用 HTML、CSS 和 JavaScript 创建的联系表单的代码。是否可以在预览按钮页面下使用 label2 来说明用户在主页上的 Detail 占位符中键入的内容？因此，如果有人在 Detail 占位符中写了“Hello”，预览页面上的 label2 就会说“Hello”。任何帮助，干杯。

function openNav() {
    document.getElementById("myNav").style.width = "100%";
}

function closeNav() {
    document.getElementById("myNav").style.width = "0%";
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea,
#contact button[type="submit"] {
  font: 400 12px/16px "Verdana", Verdana;
}

#contact {
  background: #F9F9F9;
  padding: 25px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  height:477px;
}

#contact h3 {
  display: block;
  font-family:Verdana;
  font-size: 24px;
  font-weight: 300;
  margin-bottom: 10px;
}

#contact h4 {
  margin: 5px 0 15px;
  display: block;
  font-family:Verdana;
  font-size: 13px;
  font-weight: 400;
}

#contact h5 {
  color:white;
  display: block;
  font-family:Verdana;
  font-size: 23px;
  font-weight: 300;
  margin-bottom: 10px;
}

.fieldset {
  border: medium none !important;
  margin: 0 0 10px;
  min-width: 100%;
  padding: 0;
  width: 100%;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea {
  width: 100%;
  border: 1px solid #ccc;
  background: #FFF;
  margin: 0 0 5px;
  padding: 10px;
}

#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact textarea:hover {
  -webkit-transition: border-color 0.3s ease-in-out;
  -moz-transition: border-color 0.3s ease-in-out;
  transition: border-color 0.3s ease-in-out;
  border: 1px solid #aaa;
}

#contact textarea {
  height: 100px;
  max-width: 100%;
  resize: none;
}

#button{
  float:right;
  cursor: pointer;
  padding: 13px 32px;
  width:125px;
  height:45px;
  border: none;
  font-family:Verdana;
  background: #4CAF50;
  color: #FFF;
  margin: 0 0 5px;
  font-size: 15px;
}

#button:hover{
  background: #43A047;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

#button:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

#contact input:focus,
#contact textarea:focus {
  outline: 0;
  border: 1px solid #aaa;
}

::-webkit-input-placeholder {
  color: #888;
}

:-moz-placeholder {
  color: #888;
}

::-moz-placeholder {
  color: #888;
}

:-ms-input-placeholder {
  color: #888;
}

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 13px;
    font-size: 16px;
    width:125px;
    height:45px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
input[type="file"]{
    display: none;
}
.custom-file-upload {
  cursor: pointer;
  padding: 13px 16px;
  width:125px;
  height:45px;
  border: none;
  font-family:Verdana;
  background: #4CAF50;
  color: #FFF;
  margin: 0 0 5px;
  font-size: 15px;
  display: inline-block;
  vertical-align: top;
  text-align: center;
}
.custom-file-upload:hover{
    background: #43A047;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}
.custom-file-upload:active{
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}



.overlay {
    height: 477px;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 5%;
    width: 100%;
    text-align: center;
    margin-top: 25px;
}

.overlay a {
    padding: 5px;
  margin-top:-15px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 40px;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}
#contact-submit{
  float:right;
  cursor: pointer;
  padding: 13px 32px;
  width:125px;
  height:45px;
  border: none;
  font-family:Verdana;
  background: #4CAF50;
  color: #FFF;
  margin: 0 0 5px;
  font-size: 15px;
}

#contact-submit:hover{
  background: #43A047;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

#contact-submit:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#label{
  color:white;
  padding-left:25px;
  float:left;
  font-family:Verdana;
  font-size:13px;
}
#label2{
  color:white;
  padding-left:25px;
  float:left;
  font-family:Verdana;
  font-size:13px;
}

<div class="container">  
  <form id="contact" action="" method="post">
    <h3>Connect With HR</h3>
    <fieldset class="fieldset">
      <div class="dropdown">
  <button class="dropbtn">Location</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

<div class="dropdown">
  <button class="dropbtn">Category</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
    </fieldset>
    <fieldset class="fieldset">
      <textarea placeholder="Detail...." tabindex="2"></textarea>
    </fieldset>
      <h4>Contact Information</h4>
    <fieldset class="fieldset">
        <input placeholder="Name" type="text" tabindex="4">
        <input placeholder="Preferred Contact Number" type="tel" tabindex="5">
        <input placeholder="Preferred Email" type="email" tabindex="6">
    </fieldset>
    <filedset class="fieldset">
      <label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> Attachment
</label>
<input id="file-upload" type="file"/>
      <div id="myNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="overlay-content">
    
    
    
    
    <div class="container">
        <form id="contact" action="" method="post">
      <fieldset class"fieldset">
        <h5>Summary</h5>
      </fieldset>
      <fieldset class="fieldset">
        <label id="label">Detail:</label>
        <label id="label2">Detail Information Here...</label>
      </fieldset>
   <!--  <fieldset class="fieldset">
      <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
    </fieldset>  -->
      </form>
    </div>
    
    
    
    
    
  </div>  
</div>  
<span id="button"" onclick="openNav()">Preview</span>
      <fieldset>
  </form>
</div>

最佳答案

您可以添加一个包含相关输入值的新label，然后将其innerHTML设置为您需要的值，因此:

将 id 添加到详细信息输入(占位符)(例如:id="txtDetail")
添加标签(在标签“Detail:”附近显示txtDetail的值
最后，在显示预览之前，将值从 txtDatail 复制到标签，例如:
var input = document.getElementById("txtDetail");变量值=输入值；//<-- 从输入文本获取值var label = document.getElementById("labelDetail");label.innerHTML = 值；//<-- 在预览部分的标签中设置该值

请看下面的片段:

function openNav() {
    var input = document.getElementById("txtDetail");
    var value = input.value;
    var label = document.getElementById("labelDetail");
    label.innerHTML = value;
    document.getElementById("myNav").style.width = "100%";
}

function closeNav() {
    document.getElementById("myNav").style.width = "0%";
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea,
#contact button[type="submit"] {
  font: 400 12px/16px "Verdana", Verdana;
}

#contact {
  background: #F9F9F9;
  padding: 25px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  height:477px;
}

#contact h3 {
  display: block;
  font-family:Verdana;
  font-size: 24px;
  font-weight: 300;
  margin-bottom: 10px;
}

#contact h4 {
  margin: 5px 0 15px;
  display: block;
  font-family:Verdana;
  font-size: 13px;
  font-weight: 400;
}

#contact h5 {
  color:white;
  display: block;
  font-family:Verdana;
  font-size: 23px;
  font-weight: 300;
  margin-bottom: 10px;
}

.fieldset {
  border: medium none !important;
  margin: 0 0 10px;
  min-width: 100%;
  padding: 0;
  width: 100%;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea {
  width: 100%;
  border: 1px solid #ccc;
  background: #FFF;
  margin: 0 0 5px;
  padding: 10px;
}

#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact textarea:hover {
  -webkit-transition: border-color 0.3s ease-in-out;
  -moz-transition: border-color 0.3s ease-in-out;
  transition: border-color 0.3s ease-in-out;
  border: 1px solid #aaa;
}

#contact textarea {
  height: 100px;
  max-width: 100%;
  resize: none;
}

#button{
  float:right;
  cursor: pointer;
  padding: 13px 32px;
  width:125px;
  height:45px;
  border: none;
  font-family:Verdana;
  background: #4CAF50;
  color: #FFF;
  margin: 0 0 5px;
  font-size: 15px;
}

#button:hover{
  background: #43A047;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

#button:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

#contact input:focus,
#contact textarea:focus {
  outline: 0;
  border: 1px solid #aaa;
}

::-webkit-input-placeholder {
  color: #888;
}

:-moz-placeholder {
  color: #888;
}

::-moz-placeholder {
  color: #888;
}

:-ms-input-placeholder {
  color: #888;
}

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 13px;
    font-size: 16px;
    width:125px;
    height:45px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
input[type="file"]{
    display: none;
}
.custom-file-upload {
  cursor: pointer;
  padding: 13px 16px;
  width:125px;
  height:45px;
  border: none;
  font-family:Verdana;
  background: #4CAF50;
  color: #FFF;
  margin: 0 0 5px;
  font-size: 15px;
  display: inline-block;
  vertical-align: top;
  text-align: center;
}
.custom-file-upload:hover{
    background: #43A047;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}
.custom-file-upload:active{
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}



.overlay {
    height: 477px;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 5%;
    width: 100%;
    text-align: center;
    margin-top: 25px;
}

.overlay a {
    padding: 5px;
  margin-top:-15px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 40px;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}
#contact-submit{
  float:right;
  cursor: pointer;
  padding: 13px 32px;
  width:125px;
  height:45px;
  border: none;
  font-family:Verdana;
  background: #4CAF50;
  color: #FFF;
  margin: 0 0 5px;
  font-size: 15px;
}

#contact-submit:hover{
  background: #43A047;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

#contact-submit:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#label{
  color:white;
  padding-left:25px;
  float:left;
  font-family:Verdana;
  font-size:13px;
}
#labelDetail{
  color:white;
  padding-left:25px;
  float:left;
  font-family:Verdana;
  font-size:13px;
}
#label2{
  color:white;
  padding-left:25px;
  float:left;
  font-family:Verdana;
  font-size:13px;
}

<div class="container">  
  <form id="contact" action="" method="post">
    <h3>Connect With HR</h3>
    <fieldset class="fieldset">
      <div class="dropdown">
  <button class="dropbtn">Location</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

<div class="dropdown">
  <button class="dropbtn">Category</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
    </fieldset>
    <fieldset class="fieldset">
      <textarea id="txtDetail" placeholder="Detail...." tabindex="2"></textarea>
    </fieldset>
      <h4>Contact Information</h4>
    <fieldset class="fieldset">
        <input placeholder="Name" type="text" tabindex="4">
        <input placeholder="Preferred Contact Number" type="tel" tabindex="5">
        <input placeholder="Preferred Email" type="email" tabindex="6">
    </fieldset>
    <filedset class="fieldset">
      <label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> Attachment
</label>
<input id="file-upload" type="file"/>
      <div id="myNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="overlay-content">
    
    
    
    
    <div class="container">
        <form id="contact" action="" method="post">
      <fieldset class"fieldset">
        <h5>Summary</h5>
      </fieldset>
      <fieldset class="fieldset">
        <label id="label">Detail:</label>
        <label id="labelDetail"></label>
        <label id="label2">Detail Information Here...</label>
      </fieldset>
   <!--  <fieldset class="fieldset">
      <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
    </fieldset>  -->
      </form>
    </div>
    
    
    
    
    
  </div>  
</div>  
<span id="button"" onclick="openNav()">Preview</span>
      <fieldset>
  </form>
</div>

希望对你有帮助，再见。

关于javascript - 从占位符获取信息到标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43590439/

文章推荐： javascript - JSDoc 记录导出对象中的重复属性

文章推荐： c++ - 帮助解决 Curl ERRORBUFFER

文章推荐： javascript - 在 Firefox 中设置 FileInput 的 FileList

c# - 异步任务获取 VS HttpResponseMessage 获取
我需要您在以下方面提供帮助。近一个月来，我一直在阅读有关任务和异步的内容。我想尝试在一个简单的 wep api 项目中实现我新获得的知识。我有以下方法，并且它们都按预期工作: public Htt
java - 无法从 URL 获取 URI，获取 null？
我的可执行 jar 中有一个模板文件 (.xls)。不需要在运行时我需要为这个文件创建 100 多个副本(稍后将唯一地附加)。用于获取 jar 文件中的资源 (template.xls)。我正在使用
javascript - Backbone 的模型原型(prototype)获取 vs backbone 获取
我在查看网站的模型代码时对原型(prototype)有疑问。我知道这对 Javascript 中的继承很有用。在这个例子中... define([], function () { "use
javascript - 获取 scrollTop、获取 offsetHeight 和 getStyle 需要很长时间
影响我性能的前三项操作是: 获取滚动条获取偏移高度 Ext.getStyle 为了解释我的应用程序中发生了什么:我有一个网格，其中有一列在每个单元格中呈现网格。当我几乎对网格的内容做任何事情时，它运
javascript - 获取 URL 参数函数，获取 url 部分的值，或者如果存在但没有值则返回 true？
我正在使用以下函数来获取 URL 参数。 function gup(name, url) { name = name.replace(/[\[]/, '\\\[').replace(/[\]]/,
c - MacOS 使用 sysctl() 获取 HW_MACHINE_ARCH 获取 "no such file or directory"
我最近一直在使用 sysctl 来做很多事情，现在我使用 HW_MACHINE_ARCH 变量。我正在使用以下代码。请注意，当我尝试获取其他变量 HW_MACHINE 时，此代码可以完美运行。我还认为
ios - 将我的 YouTube channel 获取(获取)到我的 iOS 应用程序中
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。关闭 9 年前。要求提供代码的问题必须表现出对所解决问题的最低限度的理解。包括尝试过的解决方案、为什么
javascript - webpack:如何从 "bower_components"获取 JavaScript，而不是从 "node_modules"获取 JavaScript
由于使用 main-bower-files 作为使用 Gulp 的编译任务的一部分，我无法使用 node_modules 中的 webpack 来require 模块code> dir 因为我会弄乱当
Javascript - 从 "Monday"获取 "mon"或从 "Tuesday"获取 "tue"等
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 5 年前。 Improve this qu
Java:无法将 Gridlayout 应用于 Jscrollpane。获取获取 java.lang.ClassCastException
我使用 Gridlayout 在一行中放置 4 个元素。首先，我有一个 JPanel，一切正常。对于行数变大并且我必须能够向下滚动的情况，我对其进行了一些更改。现在我的 JPanel 上添加了一个 J
python - 如何从 key BlockDeviceMappings 获取 VolumeId(boto3 获取 ec2 的卷信息)
由于以下原因，我想将 VolumeId 的值保存在变量中: #!/usr/bin/env python import boto3 import json import argparse import
angularjs - 未使用 acquireTokensilent 获取 token ，但使用 acquireTokenpopup Msal-browser 获取 token
我正在将 MSAL 版本 1.x 更新为 MSAL-browser 的 Angular 。所以我正在尝试从版本 1.x 迁移到 2.X.I 能够成功替换代码并且工作正常。但是我遇到了 acquireT
python - 使用 GroupBy 获取 Pandas 的平均值 - 获取 DataError : No numeric types to aggregate -
我知道有很多关于此的问题，例如 Getting daily averages with pandas和 How get monthly mean in pandas using groupby但我遇到
javascript - 无法在 mvc 获取 Controller 方法(来自 Uri())中从 QueryString 获取 DATETIME
This is the query string that I am receiving in URL. Output url: /demo/analysis/test?startDate=Sat+
ubuntu - 从 OpenLayer 3 获取 Geoserver 获取 '500 (Internal Server Error)'
我正在尝试使用 javascript 中的以下代码访问 Geoserver 层 var gkvrtWmsSource =new ol.source.ImageWMS({ u
javascript - 使用 XMLHttpRequest 获取 Ecobee API 信息。获取 500(错误 1 : "Authentication failed. Token is required.")
API 需要一个包含授权代码的 header 。这就是我到目前为止所拥有的: var fullUrl = 'https://api.ecobee.com/1/thermostat?json=\{"s
c# - 获取/删除文件的最后一个字符而不加载到内存中
如何获取文件中的最后一个字符，如果是某个字符，则删除它而不将整个文件加载到内存中？这就是我目前所拥有的。 using (var fileStream = new FileStream("file.t
JSP 获取/设置整个对象的参数
我是这个社区的新手，想出了我的第一个问题。我正在使用 JSP，我成功地创建了 JSP-Sites，它正在使用jsp:setParameter 和 jsp:getParameter 具有单个字符串。
multithreading - 获取/释放语义
在回答 StoreStore reordering happens when compiling C++ for x86 @Peter Cordes 写过 For Acquire/Release se
javascript - 获取 .on 中使用的函数的结果
我有一个函数，我们将其命名为 X1，它返回变量 Y。该函数在操作 .on("focusout", X1) 中使用。如何获取变量Y？执行.on后X1的结果？最佳答案您可以更改 Y 的范围以使其位于函

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 从占位符获取信息到标签