文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在动态创建的输入中显示输入的多个值？

在动态创建的输入中显示输入的多个值可以通过以下步骤实现：

  1. 创建一个容器元素，例如 <div> 或 <ul>，用于包含动态创建的输入。
  2. 使用 JavaScript 动态创建输入元素，例如 <input> 或 <select>，并设置相应的属性和事件监听器。
  3. 在每次用户输入时，将输入的值存储在一个数组或对象中。
  4. 使用循环遍历数组或对象，将每个值创建为一个新的输入元素，并将其添加到容器元素中。
  5. 可以选择在每个输入元素旁边添加删除按钮，以便用户可以删除特定的输入值。
  6. 最后，将容器元素插入到页面中的适当位置，以显示所有输入的值。

以下是一个示例代码，演示如何在动态创建的输入中显示输入的多个值：

代码语言：txt
复制
<!DOCTYPE html>
<html>
<head>
  <title>动态创建输入</title>
</head>
<body>
  <div id="inputContainer"></div>

  <button onclick="addInput()">添加输入</button>

  <script>
    var values = []; // 存储输入的值

    function addInput() {
      var input = document.createElement("input");
      input.type = "text";
      input.addEventListener("input", storeValue); // 监听输入事件

      var deleteButton = document.createElement("button");
      deleteButton.textContent = "删除";
      deleteButton.addEventListener("click", deleteInput); // 监听删除按钮点击事件

      var container = document.getElementById("inputContainer");
      container.appendChild(input);
      container.appendChild(deleteButton);
    }

    function storeValue(event) {
      var value = event.target.value;
      values.push(value);
    }

    function deleteInput(event) {
      var index = Array.from(event.target.parentNode.children).indexOf(event.target);
      values.splice(index / 2, 1); // 删除对应的值和删除按钮
      event.target.previousSibling.remove(); // 删除输入元素
      event.target.remove(); // 删除删除按钮
    }
  </script>
</body>
</html>

这段代码创建了一个按钮，点击按钮会动态添加一个文本输入框和一个删除按钮。每次用户输入时，输入的值会存储在 values 数组中。用户可以通过点击删除按钮来删除特定的输入值。

请注意，这只是一个简单的示例，你可以根据实际需求进行修改和扩展。对于更复杂的场景，你可能需要使用更多的 HTML、CSS 和 JavaScript 来实现所需的功能。

腾讯云相关产品和产品介绍链接地址：

  • 云函数（Serverless）：https://cloud.tencent.com/product/scf
  • 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
  • 云存储（对象存储）：https://cloud.tencent.com/product/cos
  • 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ai
  • 物联网开发平台（物联网通信）：https://cloud.tencent.com/product/iotexplorer
  • 移动推送服务（移动推送）：https://cloud.tencent.com/product/umeng_push
  • 区块链服务（腾讯区块链服务）：https://cloud.tencent.com/product/tbc
  • 腾讯云游戏引擎（GSE）：https://cloud.tencent.com/product/gse
  • 腾讯云直播（直播服务）：https://cloud.tencent.com/product/lvb
  • 腾讯云音视频处理（点播、直播）：https://cloud.tencent.com/product/vod
相关搜索:显示动态生成的输入字段的输入值获取动态创建的输入的值Thymeleaf动态创建的表单输入值多个输入的输入值重复获取动态创建的输入控件的值如何在输入时为动态生成的输入添加动态值？获取动态添加输入的输入值如何动态设置动态创建的输入域的值？React中的动态输入值从动态创建的表单输入上载多个文件如何在python中输入多个值？JQuery:动态创建的输入字段上的输入事件如何在VueJS中动态创建输入字段如何在Jade中获取动态生成的输入值从动态创建的输入写入动态创建的div如何在React中显示对象中的输入值如何在动态创建的输入字段中显示占位符而不是名称我输入的输入值没有显示在JavaScript中JS:从多个输入的值创建逗号分隔值输入量，如颤动中的PayPal
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

    • Android中多个EditText输入效果的解决方式

    前言 在开发中，我们常常遇到这种情况 ? 我们往往需要的是下面这种效果 ?...但是如果把这些实现的代码写在Activity中会比较麻烦，影响代码美观 解决方法 于是就有了下面这个辅助类，禁用了按钮的点击事件和按钮的渐变色，可同时添加一个或者多个EditText /** *...文本输入辅助类，通过管理多个TextView或者EditText输入是否为空来启用或者禁用按钮的点击事件 */ public final class TextInputHelper implements...(false); if (isAlpha) { //设置半透明 mMainView.setAlpha(0.5f); } } } } 在Activity创建时添加监听...Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //创建一个辅助类

    1.9K20

    如何在Word中输入复杂的数学公式？

    一、甲的方法 1、直接插入内置公式 Word系统中有自带的一些公式，比如二次公式、二项式定理等，若是需要直接点击插入——符号——公式，选择公式即可插入到文档中。 ?...二、乙的方法 方法一 在word公式栏中，转换部分有‘{} LateX’选项，一般为默认选择，然后编写公式时就可以用LateX语法编写。但是会出现上面所说的情况。...键盘快捷方式：自定义”， 找到 ‘公式工具|公式 选项卡’，在右边框中选择 “EquationProfessionalOne”，在下方‘请按新的快捷键’中按下你想设置的快捷键，如本人设置的 “alt +...$输入$（例：$\alpha$ ） 输入 显示 输入 显示 输入 显示 输入 显示 \alpha α \alpha...另：Markdown 中的表示 直接输入下面代码： $F(j\omega)=\int_{\infty}^{\infty}f(t)e^{-j\omega t} dt$ 显示：

    5.4K21

    如何在命令行中监听用户输入文本的改变？

    这真是一个诡异的需求。为什么我需要在命令行中得知用户输入文字的改变啊！实际上我希望实现的是：在命令行中输入一段文字，然后不断地将这段文字发往其他地方。...本文将介绍如何监听用户在命令行中输入文本的改变。 ---- 在命令行中输入有三种不同的方法： Console.Read() 用户可以一直输入，在用户输入回车之前，此方法都会一直阻塞。...看起来我们似乎只能通过 Console.ReadKey() 来完成我们的需求了。 但是，一旦我们使用了 Console.ReadKey()，我们将不能获得另外两个方法中的输入体验。...然而，不幸的是，除了这三个方法，我们还真的没有原生的方法来实现命令行的输入监听了。所以看样子我们需要自己来使用 Console.ReadKey() 实现用户输入文字的监听了。...我在 如何让 .NET Core 命令行程序接受密码的输入而不显示密码明文 - walterlv 一问中有说到如何在命令行中输入密码而不会显示明文。我们用到的就是此博客中所述的方法。

    3.4K10

    Excel实战技巧79： 在工作表中创建让输入的密码显示*号的登录界面

    学习Excel技术，关注微信公众号： excelperfect 在工作表中，我们可以创建简单的用户名和密码登录框，并且像专业的密码框界面那样，在用户输入密码时显示的是*号。...在设计模式下，在要掩盖输入内容的文本框中单击鼠标右键，选取快捷菜单中的”属性“命令，如下图3所示。 ?...图3 在“属性“对话框中，找到”PasswordChar“，并在其后的输入框中输入“*”号，如下图4所示。 ?...图4 注：在PasswordChar中，可以在其中输入任何字符，这样在文本框中输入数据时，将仅显示该字符。通常，我们使用星号（*），当然也可以使用问号（?）、感叹号（!）等。...此外，如果回到属性设置，将PasswordChar中的特殊字符删除，那么文本框中的密码也会显示出来。因此，想要更加安全地使用密码，需要考虑其他方法。

    3.8K10

    Java中获取键盘输入值的三种方法

    程序开发过程中，需要从键盘获取输入值是常有的事，但Java它偏偏就没有像c语言给我们提供的scanf()，C++给我们提供的cin()获取键盘输入值的现成函数!...= (char) System.in.read(); 　　System.out.println(“your char is :”+i); 　　} 　　} 　　虽然此方式实现了从键盘获取输入的字符...，但是System.out.read()只能针对一个字符的获取，同时，获取进来的变量的类型只能是char,当我们输入一个数字，希望得到的也是一个整型变量的时候，我们还得修改其中的变量类型，这样就显得比较麻烦...(System.in); 　　System.out.println(“请输入你的姓名：”); 　　String name = sc.nextLine(); 　　System.out.println...(“请输入你的年龄：”); 　　int age = sc.nextInt(); 　　System.out.println(“请输入你的工资：”); 　　float salary = sc.nextFloat

    12010

    Java中next()和nextLine()的区别（为什么nextLine()输入回车没显示）

    (); //运行程序宛如跳过了这段代码一样 System.out.println("输出的是："+str); } } 运行，输入2，然后点击回车，此时代码直接会运行结束。...二、原因分析： 这里就要详细讲一下nextLine()在接受键盘输入的注意事项了。 注意：nextLine() 会接收回车字符（包含空格和Tab键）。...解决方案1： 既然我们知道了nextLine()的特性，那么，我们可以在nextInt()语句后面再加上一句nextLine()语句，用于“吃”掉这个输入缓冲区的’\n’。...(); //换成这个 System.out.println("输出的是："+str); } } 程序是正常进行的，因为next()就算碰到了输入缓冲区里面的’\n’也会忽略掉（不接受...最重要的一点是:nextInt、nextdoublie、nextfloat和next方法的效果是一样的，需要特别注意。

    94220

    如何在ubuntu18.04中设置使用中文输入法的使用

    ubuntu 在最新的版本中已经可以不用用户自己单独去下载中文输入法使用了，本次使用为 ubuntu18.04LTS版本(登陆是界面选择的是ubuntu on wayland)，设置方式非常简单 1、打开设置...，不知道的请点击右上角的工具栏即可看到。...2、找到设置中语言项，点击语言安装管理，安装中文语言后选择输入方式。 ? ? 点击关闭，然后添加输入语言，在其中找到中文拼音添加即可 ? ? ? ?...可以看到中文输入法已经存在了，点击选择即可使用了，输入法看上去停像 sunpinyin，不管它了。如果要使用搜狗的话选择输入方式时请选择 XIM 方式。...以上就是本文的全部内容，希望对大家的学习有所帮助。

    3.2K21

    SAP MM 批次管理的物料创建DN时无存储地点就不能输入批次值？

    SAP MM 批次管理的物料创建DN时无存储地点就不能输入批次值？...究竟为啥会出现1)里的问题？笔者做了一些调查： 3.1)，物料主数据，三个物料都有激活批次管理。 3.2),比较2个DN的数据，有所发现。...区别在于2个DN里，相关物料的ITEM的数据里'batch management rqt'字段值不同， 为啥同样启用了批次管理的物料，在交货单里会有不同的行为表现？笔者很是奇怪。...3.3,花费了大量时间做各种调查，原因找到了：是因为74000096和74000219这2个物料先被创建SO#10002993，再被启用批次管理，这样导致根据SO创建的DN里‘batch mgmt rqt...重新为74000096和74000219这2个物料创建新的销售订单，并创建DN，DN里storage location也为空，就不会再出现1）里描述的现象了。 这真是一个乌龙事件！

    72000

    如何在Word中输入复杂的数学公式？看完这篇文章就够了

    一、甲的方法 1、直接插入内置公式 Word系统中有自带的一些公式，比如二次公式、二项式定理等，若是需要直接点击插入——符号——公式，选择公式即可插入到文档中。...|公式 选项卡’，在右边框中选择 “EquationProfessionalOne”，在下方‘请按新的快捷键’中按下你想设置的快捷键，如本人设置的 “alt + P”，然后按下左下角的‘指定’，关闭确认即可...输入公式后显示： 定义快捷键‘alt+P’ 按下‘alt+P’显示 三、AXYZdong 的方法 对于上述两个人的方法我不作评价，下面说说我的方法（要熟悉LaTeX公式编辑语法） 1、准备工作...另：Markdown 中的表示 直接输入下面代码： $F(j\omega)=\int_{\infty}^{\infty}f(t)e^{-j\omega t} dt$ 显示：...，就是当对word文档进行分栏时，也就是双栏显示时，这个公式依然显示在一行！

    28.3K30

    解决iview weapp的i-input组件在微信开发者工具中不能输入值的问题

    记录下i-input组件在模拟器中不能输入值问题的原因及解决办法 最近开始用mpvue框架,所以遇到了一些坑,这篇文章记录下关于input组件的一个坑。老司机请略过。...于是乎进行了一番搜索，发现有同学遇到了同样的情况 ⬇️ iview weapp 在小程序开发工具中i-input组件不能输入值 看了下自己的登录页,果然是没加maxlength属性 <template...虽然这样就解决了，但是为啥呢，仔细想了想，直觉告诉我是默认值的问题，会不会是因为没有默认值导致maxlength为0使得输入值被清掉了?...可以发现显示的maxlength值为0 我们再去查看iview的input组件源码 Component({ behaviors: ['wx://form-field'], externalClasses...··· maxlength: { type: Number, value: 100 } ··· 在页面引用标签的地方不用设置maxlength就可以发现在微信开发者工具中也可以输入值了(

    2.4K20
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券