使用 Gravity Forms 和 Javascript 计算一个输入字段的长度并在另一个输入字段中打印它

2024-05-09

我正在使用 WordPress 的重力形式,我试图弄清楚如何计算用户在我的一个输入框中键入的字符的长度,并将该数字以相同的形式打印到另一个输入框。我认为这可以用 Javascript 来完成,但我是一个完全的新手,这是我非常淡化的努力。只是为了让你能看到我正在尝试做的事情。

<!-- edited -->
 <form>
  <input name="input_10" id="input_1_10" type="text" value="" class="small" tabindex="1">
  <input name="input_2" id="input_1_2" type="text" value="" class="medium" tabindex="2">
  <div style="padding:10px 15px; font-family:sans-serif !important;">
     <p id="preview" style="text-align:center;font-size:22px;font-weight:bold;">Sample Text</p>
  </div>
</form>

<script>
    var bank = document.getElementById("input_1_2");
    var countNum = document.getElementById("input_1_10");
    bank.addEventListener("keyup", function(e) {
        countNum.value = bank.value.length;
    });

    document.getElementById("preview").innerHTML= countNum.value;




</script>

因此,用户将在 #input_1_10 中键入他们的“消息”,我需要一种方法来计算字符数(最好不计算空格)并在用户提交表单之前在 #input_1_2 中打印它们。

** 编辑:我还想知道如何将 #input_1_2 的值写入 ID 为 #preview 的段落中。 **

感谢您的关注;)


Add an eventListener到第一个输入。在这种情况下,每当用户按下并释放某个键时,输入的长度就会显示在第二个输入中。

<form>
    <input name="input_10" id="input_1_10" type="text" value="" class="small" tabindex="1">
    <input name="input_2" id="input_1_2" type="text" value="" class="medium" tabindex="2">
</form>

<script>
    var bank = document.getElementById("input_1_10");
    var countNum = document.getElementById("input_1_2");
    bank.addEventListener("keyup", function(e) {
        countNum.value = bank.value.length;
    });
</script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 Gravity Forms 和 Javascript 计算一个输入字段的长度并在另一个输入字段中打印它 的相关文章

  • Vue 3 Composition API 提供/注入在单文件组件中不起作用

    我正在使用 Composition API 在 VueJS 3 中创建一个库 我实现了提供 注入 如中所述docs https v3 vuejs org guide composition api provide inject html i
  • 位置特征检测:固定

    我正在尝试找到一个脚本来检测设备是否放置position fixed元素相对于视口而不是整个文档 目前 标准桌面浏览器和 Mobile Safari 适用于 iOS 5 都是这样做的 而 Android 设备则相对于整个文档放置固定元素 我
  • 使用 Node.js 构建网站的最佳实践

    这个问题的答案是社区努力 help privileges edit community wiki 编辑现有答案以改进这篇文章 目前不接受新的答案或互动 我想知道如何使用 Node js 从头开始 开发一个网站 我明白我怎么能possibly
  • 本地推送通知到在应用程序内运行 JS 代码的 Win8 Live Tile

    我正在尝试将更新发送到我的应用程序的磁贴 当应用程序运行时 这可以正常工作 例如 当用户单击按钮时 我可以轻松地将磁贴更新通知发送到磁贴 我无法解决的是当应用程序无法运行时如何更新磁贴 我找到的唯一选择是使用以下命令从远程 Web 服务器拉
  • IntersectionObserver是否支持水平滚动观察?

    我制作了几个垂直滚动 IntersectionObserver 模块 但我对水平滚动感兴趣 根将是 div 观察目标将是 img 我想观察当 img 放大但 div 保持视口宽度时的变化 我什至不确定移动 Safari 是否会将缩放后的图片
  • ReactTransitionGroup 不适用于 React-redux 连接组件

    我正在开发一个更大的项目 但我创建了这个简短的示例来说明问题 如果我使用Box组件 它的工作原理 它在控制台中输出componentWillEnter and componentWillLeave当我们点击按钮时 如果我使用BoxConta
  • javascript 选择自定义光标 (svg)

    我正在动态地将光标更改为悬停时的本地 svg element on mouseover function this css cursor url svgs pointer svg 9 30 auto 工作正常 但我想选择该 svg 来操纵其
  • React autoFocus 将光标设置为输入值的开头

    我有一个受控输入 最初显示一个值 我已将该输入设置为自动聚焦 但当我希望它出现在末尾时 光标出现在输入的开头 我知道这可能是因为自动对焦是在值之前添加的 但我不能 100 确定 在输入字段末尾完成光标初始化的最佳方法是什么 var Test
  • JavaScript 继承;调用和原型

    要在Javascript中实现继承 通常需要执行以下两个步骤 假设我有一个基类 Animal var Animal function name this name name 我现在想从中派生一个子类 Dog 所以我想说 var Dog fu
  • 如何通过单击链接来更改 div 的内容?

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st
  • 计算三次贝塞尔曲线的弧长、曲线长度。为什么不工作?

    我正在用这个算法计算弧长 三次贝塞尔曲线的长度 function getArcLength path var STEPS 1000 gt precision var t 1 STEPS var aX 0 var aY 0 var bX 0
  • 将 Firebase 云消息传递与 Windows 应用程序结合使用

    我在 Android 和 iOS 应用程序中使用 Firebase Cloud Messaging 但是我还有此应用程序的 Windows Mac OS 版本 我想保留相同的逻辑 我知道 Firebase Cloud Messaging 可
  • JavaScript RegEx:不同的结果:使用字符串和使用正则表达式“文字”构建模式?

    使用 RegExp 文字与字符串之间有什么区别吗 http jsfiddle net yMMrk http jsfiddle net yMMrk String prototype lastIndexOf function pattern p
  • 如何正确取消引用然后删除 JavaScript 对象?

    我想知道从内存中完全取消引用 JavaScript 对象的正确方法 确保删除时不会在内存中悬空 并且垃圾收集器会删除该对象 当我看这个问题时在 JavaScript 中删除对象 https stackoverflow com questio
  • 如何使用 JavaScript 或 jQuery 克隆 HTML 元素的样式对象?

    我正在尝试克隆元素的样式对象 这应该允许我在更改后重置所述元素的样式 例如 el style left 50px curr style left 50px Modify the elements style The cloned style
  • 如何从浏览器向服务器发送“页面将关闭”消息?

    我想向每个 html 文档添加一个脚本 JavaScript 该脚本向服务器发送两条消息 页面确实打开了 页面将关闭 此消息包含页面打开的时间 打开消息应在文档加载时 或加载完成时 发送 这是简单的部分 The close message
  • 使用javascript动态更新css内容

    需要将 css 更新为动态值 我不确定最好的方法是什么 div style zoom 1 div 缩放级别将根据窗口大小调整触发 应用程序将相应缩放 我将此应用程序加载到 cordova 中并让它在 iPAD 中运行 然后我意识到需要使用
  • 滚动顶部不符合预期

    Note 由于上次忘记奖励而重新开放赏金 A Woff 大师已经给出答案 我想在用户展开某一行时到达该行 这样当最后一个可见行展开时 用户不必向下滚动即可查看内容 I used example tbody on click td green
  • 如何通过索引访问 JSON 对象中的字段

    我知道这不是最好的方法 但我别无选择 我必须通过索引访问 JSONObject 中的项目 访问对象的标准方法是只写this objectName or this objectName 我还找到了一种获取 json 对象内所有字段的方法 fo
  • 使用velocity.js制作可拖动元素的动画

    我正在使用velocity js 为用户拖动的可拖动 SVG 元素设置动画 然而 velocity js 将先前的 mousemove 坐标排队并通过所有后续的 mousemove 坐标进行动画处理 我想要的是velocity js 不要对

随机推荐

  • 重复的 AssemblyVersion 属性

    我有一个项目在编译时生成以下错误 错误 CS0579 重复的 AssemblyVersion 属性 我已经检查过文件AssemblyInfo cs看起来那里没有重复 I found MSDN 上的这篇文章 http social msdn
  • ListView onClick 事件不会因链接的电子邮件地址而触发

    我有一个直接的 ListView 带有 ListAdapter 和列表的自定义 onItemClick 方法 我的 ListView 项目可单击以执行其他功能 但是 我的一些 ListView 元素包含一个电子邮件地址should也可以点击
  • 如何读取 Google 表格中单元格的颜色

    我正在使用 Python Google Sheets API 并且我想读取单个单元格的颜色 我已阅读文档 但我只能找到有关如何从单元格检索文本的信息 而不是颜色格式的信息 您可以使用方法 电子表格 get https developers
  • 终端中的 Visual Studio Code Java 路径

    我刚刚开始使用 Visual Studio Code 并用 Java 创建了一个简单的 Hello World 程序 它打印Hello World就像它应该的那样 但我也得到了一些路径 例如 usr lib jvm java 11 open
  • R 中有没有快速替换列值的方法?

    假设我们有一个包含数值的数据框 如下所示 Temperature Height 32 157 31 159 33 139 我想更换Height价值观与pic 00001 pic 00002等等 最终结果是 Temperature Heigh
  • Java:getTimeZone不返回默认值

    我有以下指示 TimeZone zone TimeZone getTimeZone Asia Toyo 显然 它应该返回 null 但它会返回默认时区 这不是我的情况所需的行为 来自 Java 文档 返回指定的TimeZone 或 GMT
  • 为什么超过44个字符时打印随机符号

    我正在从 C 编程 现代方法 一书中学习 C 现在我正在进行有关数组的练习 练习之一是编写一个过滤器 以不同的方式打印输入消息 到目前为止 参见下面的代码 一切正常 直到字符数超过 44 然后它打印随机符号 如果字符数低于 44 则一切正常
  • 如何在 firebase 中设置重复项目? [复制]

    这个问题在这里已经有答案了 我想在 firebase 中创建一个重复的项目 这样我就不必经历添加 firebase 功能和通知等的麻烦 如果可以的话 我会删除所有身份验证用户 以便为实际的应用程序做好准备 但我无法做到这一点 那么 如何在没
  • 使用什么来生成包含动态生成的条形码的 pdf 文档(Java)?

    我的要求要求生成包含任意文本和条形码的 pdf 文档 我有相关的question https stackoverflow com q 6625849 59470它解决了pdf生成部分 但在这里我想知道如何在Java中将条形码合并到pdf中
  • Find() 的 Javascript 代码优化

    我有 C 代码 可以在 SQL 中运行查询并返回大约 2000 行 然后创建一个Treeview控件并添加到我的主页 这几乎是立即完成的 这很好 var orgId select name ctl00 PageContent Functio
  • 如何更改 Google 表格中图表的背景不透明度?

    我想在 Google 表格中设置 Google 图表的透明度或不透明度 就像在 Microsoft Excel 中一样 将图像设置在文本后面 以便文本仍然可读 不过好像该功能不起作用 功能预览 http drive google com f
  • 保存到服务器后,隐藏字符“\u0”添加到文件中

    我正在使用 Apache 服务器为 Web 开发网站提供服务 这样我就可以不断保存和编辑文件 我使用 Gulp for Sass 来连接和丑化 css 和 js 文件 一个月前 我的 js 和 css 文件遇到问题 似乎在文件下面添加了随机
  • 在Web应用程序中调用phonegap插件功能

    我正在构建我的第一个phonegap应用程序 当我打开该应用程序时 我立即将用户重定向 window location 到托管我的网络应用程序的服务器 是否可以从那里加载phonegap 插件 因为 deviceready 事件没有触发 我
  • PIL 不保存透明度

    from PIL import Image img Image open 1 png img save 2 png 第一张图像具有透明背景 但是当我保存它时 透明度消失了 背景为白色 我究竟做错了什么 可能图像已被索引 PIL 中的模式 P
  • Mnesia:如何同时锁定多行,以便我可以写入/读取一组“一致”的记录

    我多么希望我一开始就能表达我的问题 取一个包含 26 个键 a z 的表 并让它们具有整数值 创建一个流程 哎哟 一遍又一遍地做两件事 在一笔交易中 写入随机值a b and c使得这些值always总和为 10 在另一个事务中 读取值a
  • 交换两个向量之间的值,使两个向量的 max_element 之和最小

    这是 Codechef 的问题 但请耐心等待 https www codechef com ZCOPRAC problems ZCO16001 https www codechef com ZCOPRAC problems ZCO16001
  • SavedStateHandle不持久化数据

    我按照下一页中的说明创建了一个 viewModel 但是SavedStateHandle当我关闭应用程序并再次打开它时不起作用 这是页面 ViewModel 的已保存状态模块 https developer android com topi
  • 图片无法直接上传到相册

    我正在开发上传图片文件的应用程序 但图片不能直接上传到相册 上传之前始终必须经过批准 如何解决这个问题 问题 您想将这些照片添加到您的相册吗 下面的照片是从另一个应用程序上传的 您需要批准它们 你需要user photos允许直接上传到相册
  • 处理 EF 存储过程的多个结果集的通用方法

    EF 6 NET 4 51 我正在尝试构建一个通用帮助程序类 它将帮助我将每个结果集 翻译 为类型安全类 如此处所述使用 SqlQuery 处理存储过程的多个结果 https stackoverflow com questions 2530
  • 使用 Gravity Forms 和 Javascript 计算一个输入字段的长度并在另一个输入字段中打印它

    我正在使用 WordPress 的重力形式 我试图弄清楚如何计算用户在我的一个输入框中键入的字符的长度 并将该数字以相同的形式打印到另一个输入框 我认为这可以用 Javascript 来完成 但我是一个完全的新手 这是我非常淡化的努力 只是