将剪贴板中的代码粘贴到多个输入字段中

2024-04-08

我一直在寻找 Vanilla Javascript 解决方案,将代码复制粘贴到多个输入字段中。

我在互联网上找到了解决方案,但都是基于 jQuery 的。这是 jQuery 解决方案 https://stackoverflow.com/questions/11804064/pasting-multiple-numbers-over-multiple-input-fields

<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">

我从电子邮件中复制了此代码,并将代码粘贴到任何输入字段中,它将在每个字段中一一粘贴完整的代码。然后使用预先保存的代码验证此代码。 粘贴然后收集并验证代码普通 JavaScript就是我正在寻找的。


这是一种方法,可以轻松修改它以处理特定的文本输入,但这可以确保页面上的每个文本输入从剪贴板获取相同的数据。

边注:querySelectorAll返回一个nodelist您可以使用而不是数组[].forEach.call使用数组的forEach方法在一个nodelist.

// Listen to paste on the document
document.addEventListener("paste", function(e) {
  // if the target is a text input
  if (e.target.type === "text") {
   var data = e.clipboardData.getData('Text');
   // split clipboard text into single characters
   data = data.split('');
   // find all other text inputs
   [].forEach.call(document.querySelectorAll("input[type=text]"), (node, index) => {
      // And set input value to the relative character
      node.value = data[index];
    });
  }
});
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将剪贴板中的代码粘贴到多个输入字段中 的相关文章

随机推荐

  • Android Studio ML 套件无法加载 OCR 模块

    我正在开发一个涉及 ML 套件的 Android 应用程序 我经历了tutorial https firebase google com docs android setup了解如何设置 Android Studio 以与 Firebase
  • 在第 n 次出现后删除字符串的其余部分

    我有以下字符串 a this is a string 我希望删除第三个 之后的所有内容符号 以便它返回 trim a gt gt gt this is a 而没有第三个 的字符串应该返回自身 这个答案 如何删除python中特定字符之后的所
  • 将 XAML 转换为 FlowDocument 以在 WPF 中的 RichTextBox 中显示

    我有一些 HTML 我正在使用 Microsoft 提供的库将其转换为 XAML string t HtmlToXamlConverter ConvertHtmlToXaml mail HtmlDataString true 现在 从如何将
  • RuntimeException在android中导致ANR而不是崩溃

    我两次都收到 ANR throw new NullPointerException random null pointer and while true 仅在异常部分VM实际关闭 D AndroidRuntime 关闭VM 第二个问题是 如
  • 角度、材料侧导航和粘性工具栏

    我正在尝试 Material Side nav 和 Angular 6 7 我想要实现的目标显示在接下来的两张图片中 具有折叠侧面导航的应用程序 该应用程序具有扩展的侧面导航 简而言之 可以通过按钮打开和关闭的侧面导航 a fixed内容上
  • JTextField setActionCommand() 的目的是什么[如何以编程方式访问它以查找事件发生在哪个单元格?]

    原始帖子后几个月编辑 这个问题的动机是需要知道单击按钮时 11x11 网格 JTextField 数组 的哪个单元格处于活动状态 我问了错误的问题并选择了错误的工具 setActionCommand 尽管它当时通过字符串操作起作用 我最终选
  • 何时在 .NET 中使用 Array() 而不是 Generic.Lists

    在 NET 中什么时候适合使用数组而不是通用列表 T 我一直很难看到数组比通用列表提供的任何好处 但感觉我可能错过了一些东西 性能是让我印象深刻的一件事 因为它是一个潜在的瓶颈 Thanks 当您使用固定数量的给定类型的对象时 没有必要承受
  • Paypal 沙盒显示错误

    单击 继续 按钮登录后 Paypal 沙箱显示错误 Error no template specified at engine x ebay cronus software service nodes ENVaqqittlg2x28 uni
  • Java JProgressBar 使用图像

    我正在用 Java 制作一个游戏 并且我正在使用JProgressBar为了健康吧 我想使用图像 而不是颜色 JProgressBar 但我一直没能做到 我尝试过使用绘画方法 paintComponent方法 创建一个新类 但它不起作用 有
  • 将 ActionCable 发送给特定用户

    我有以下代码 它在我的 Rails 应用程序中发送 ActionCable 广播 ActionCable server broadcast notification channel notification Test message 连接如
  • 一个 Web 应用程序上具有多个域的 IIS

    我正在构建一个Web应用程序 on IIS 与 asp net 其概念如下 客户购买域名 然后从 20 30 个现成模板中选择一个模板 现在应用程序驻留在说www mywebappblabla com usersites 用户域是www m
  • 为什么要检查 if (*argv == NULL)? [复制]

    这个问题在这里已经有答案了 在我目前正在学习的数据结构课程中 我们的任务是用 C 编写一个网络爬虫 为了让我们抢占先机 教授为我们提供了一个从给定 URL 获取源代码的程序 以及一个简单的 HTML 解析器来剥离标签 该程序的 main 函
  • 使用 eulerr R 自定义欧拉图颜色

    我正在尝试使用 Johan Larsson 在 R 中的 eulerr 包绘制欧拉图 我正在关注这个例子 https cran r project org web packages eulerr index html开发人员在其中解释如何自
  • IntelliJ IDEA 中为 Tomcat 设置了哪个应用程序上下文?

    到目前为止 我在 Windows 命令中运行 Tomcat 服务器 v 7 0 26 catalina bat start脚本 如果我想部署我的 Web 应用程序 我必须通过 Maven 构建它并复制 WAR 到指定 Tomcat 部署目录
  • 检查互联网连接

    我需要我的应用程序来检查用户计算机上的互联网连接 如果有 则显示图像 如果没有 则显示不同的图像 这是我用来让它工作的代码 Private Sub Window Loaded ByVal sender As System Object By
  • HTML5 Canvas 实时绘图

    问题 我怎样才能使putImageData 随着图像各个部分的计算 实时更新画布 我正在开发一个 JavaScript TypeScript 应用程序来在 HTML5 上绘制 Mandelbrot 集
  • 使用“verticalScroll”修饰符时如何禁用水平拉伸/过度滚动?

    我想要一个可滚动视图 我正在使用verticalScroll列上的修饰符 Column modifier Modifier verticalScroll rememberScrollState I could provide more de
  • 将图像与噪声进行模板匹配的最佳方法是什么?

    我有一个大图像 5400x3600 其中有多个我需要检测的闭路电视 旋转检测需要花费大量时间 4 7 分钟 但它仍然无法解决某些闭路电视问题 匹配这样的模板的最佳方法是什么 我正在使用 skImage openCV 不适合我 但我也愿意接受
  • 使用 htaccess 屏蔽域名和文件夹名称

    我正在尝试使用 htaccess 和 mod rewrite 用另一个域屏蔽一个域及其两个子文件夹 例如 http example com sub sub sub to http example 2 com 以便http example 2
  • 将剪贴板中的代码粘贴到多个输入字段中

    我一直在寻找 Vanilla Javascript 解决方案 将代码复制粘贴到多个输入字段中 我在互联网上找到了解决方案 但都是基于 jQuery 的 这是 jQuery 解决方案 https stackoverflow com quest