表单文本框实现复制字符后自动切割粘贴到不同文本框中

最新推荐文章于 2023-02-10 14:55:32 发布
最新推荐文章于 2023-02-10 14:55:32 发布
阅读量335 收藏
点赞数
分类专栏： 问题锦囊(精华) 文章标签： 低代码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TeemlinkMarket/article/details/127731395
版权
本文介绍了如何在低代码平台上利用MyApps的表单引擎和前端JQ技术，实现在复制字符串如手机号后，自动将其分割并粘贴到多个文本框中，以展示为xxx-xxxx-xxxx的格式。该方法适用于提升业务效率的常见场景。
摘要由CSDN通过智能技术生成

常用场景：有些业务场景需要快速复制字符串（例如手机号），粘贴的时候分别放到不同的框中显示（xxx-xxxx-xxxx），这种方法该如何实现？  下面将通过MyApps低代码平台的表单引擎通过前端JQ和平台结合的方式为大家呈现。

 

（实际效果）

(function(){
        var docid=getId();
        var jq="<script>";
        jq+="jQuery(document).ready(function(){";
        //限制字符长度，name为控件名称
        jq+="jQuery("input[name='WMI']").attr('maxlength','3');";
        jq+="jQuery("input[name='VDS']").attr('maxlength','6');";
        jq+="jQuery("input[name='VIS']").attr('maxlength','8');";
        jq+="});";
        //粘贴事件，给第一个文本框
最低0.47元/天 解锁文章
天翎MyApps低代码平台
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实现网页表格输入框批量粘贴
07-24
通过JAVAscript实现了批量copyEXCEL或者tab符号等分割的文本数据.具体应用的时候,需要自己完善.
关于文本框的一些限制控制总结~~
09-05
总的来说，通过CSS的`ime-mode`属性和JavaScript的`onpaste`事件，我们可以轻松地实现对文本框输入中文和粘贴功能的限制。这些控制方式可以帮助开发者更好地维护数据的规范性和安全性，尤其适用于需要特定格式输入的...
表单提交时自动复制内容到剪贴板
管子（zero）的杂乱空间
11-23 1189
<!--google_ad_client = "pub-4490194096475053";/* 内容页,300x250,第一屏 */google_ad_slot = "3685991503";google_ad_width = 300;google_ad_height = 250;//--><script type="text/javascript"src="
[学习笔记]vue input输入框输满或清空自动切换下/上一个输入框
iufesjgc的博客
03-17 1110
应用场景：一般使用在输入生日、银行卡信息等场景。 效果图： html： <input type="text" placeholder="1980" @keyup="nextinput" @keyup.delete="backspace" maxlength="4" v-model="userinfo.birthday.y.
表单输入框黏贴自动过滤转义实例
weixin_30387799的博客
07-16 241
来自张鑫旭大神的代码：https://www.zhangxinxu.com/wordpress/2018/09/js-clipboard-api-paste-input/ /** @description 表单输入框粘贴体验优化 @author zhangxinxu @license MIT */ // 遍历所有的输入框 [].slice.call(document.queryS...
快速粘贴与自动填表软件V1.0 注册版
准女婿的博客
05-01 2234
注册版下载地址 https://yunpan.cn/cYfxwqHAPDWuR 访问密码 3126
javascript限制文本框输入值类型的方法
10-24
`onbeforepaste`事件在用户尝试粘贴内容到文本框之前触发，我们可以利用它来过滤掉将要被粘贴的非数字字符。在HTML代码中，`onbeforepaste`事件的处理函数是`clipboardData.setData("text", clipboardData.getData(...
提示文本框还能输入多少个字符
03-16
6. **异常处理**：在程序设计中，需要考虑用户可能会输入非文字的情况，如复制粘贴大量字符或特殊符号。因此，我们需要对这些情况进行异常处理，确保程序的稳定性和安全性。 7. **国际化与本地化**：对于多语言应用...
Android 提示文本框还能输入多少个字符源码.rar
12-03
此外，复制粘贴操作也会检查是否超出字符限制，如果超出，则不会执行粘贴操作，并给出提示。 这个源码实现了一个实用的功能，适用于需要对用户输入进行字符限制的场景，如表单、评论、搜索框等，可以有效提高应用的...
文本框的输入限制
05-29
这篇博客“文本框的输入限制”可能探讨了如何在编程中实现这一功能。 在Web开发中，例如使用HTML5，我们可以直接通过`<input>`标签的属性来设定输入限制。例如，`type="text"`定义了一个基本的文本输入框，而`...
复制excel内容粘贴到html表格中的输入框里
12-23
实现将复制的excel的内容粘贴到html 表格的输入框中的功能
网页自动填表——文本输入框及多行文本输入框
06-17
网页自动填表——文本输入框及多行文本输入框自动填写方法
前端复制文字
couch potato的博客
02-10 194
【代码】前端复制文字。
Javascript操作粘贴板实现对多input赋值
jjttwwlovekiki的博客
05-23 398
document.body.onpaste=function(event){ var data=event.clipboardData.getData("text");//获取粘贴板数据得到string var numdata=data.split("\r\n");//依照“/r/n”将字符串中的数字提取出来 event.preventDefault();//取消默认的复制事件 $("#quantity").val(numdata[0]...
用JS做复制网页表格内容和输入框内容功能
qq_34828100的博客
12-27 1237
最近要求要做一个复制表格内容的功能，效果如下： 点击复制按钮，会出现下面的效果： 网上一些都是复制 input 框里的内容，这次做的是复制表格内容，记录一下做的功能，思路是把表格内要复制的内容拼接成一个字符串，再把这个字符串赋值给 input 框里的值，再就跟 input 框一样操作复制功能了，最后是隐藏复制的内容。 &lt;div&gt; &lt;table id="table...
网站手工添加一行数据_简单三步教你批量快速地把EXCEL数据提交到网上
weixin_39841709的博客
11-30 294
现在，上网已是我们每天必做的事情，很多网站都需要注册成为其会员才能享受更多功能，每次都要输入很多相同的信息，甚是浪费时间，如果你是一名网站编辑或站长，也要每天更新发布很多新的信息，或者你是为了某项网络活动，要连续不断的点击或提交某些网页项目，种种的这些工作，都很是枯燥，时间就是金钱，光阴似箭，我们如果都将有限的生命浪费在这些事情上，那就太不值了，下面我给大家介绍一款产品，就可以专门用来帮助你完成...
输入框支持大量复制自动填充
weixin_47898697的博客
09-22 405
需求：可以添加多条数据的时候为了可以不需要一条一条输入，需要怎加复制数据后自动填充到输入框内，上图： 点击小铅笔切换； 同时左边输入备注后，在右边同样展示数据 HTML:基本的样式结构和数据绑定 <nz-form-control [nzSpan]="17" style="position: relative;"> <div *ngIf="!iconrated" style="float: left;width: 92%;"> .
网页表单文本框的自动填写（四种方法）
11-14 9832
随着应用系统从客户端+服务器模式，逐渐发展成浏览器+服务器模式。越来越多的操作是基于浏览器来完成的，在输入数据时可以方便的使用批量操作工具，提高工作效率。
excel内容粘贴至页面
w_t_y_y的博客
06-15 421
1、直接粘贴： <!-- @format --> <template> <div class="body"> <textarea @paste="onPaste" style="height:200px;width:200px"></textarea> </div> </template> <script> export default { name: 'Default', dat
使用vue读取文件文本内容并输入到页面文本框中
最新发布
09-08
### 回答1： 要使用Vue读取文件文本内容并输入到页面文本框中，你可以按照以下步骤： 1. 首先，在Vue组件中定义一个data属性，用于存储读取到的文件文本内容。例如： ```javascript data() { return { fileContent: '' } } ``` 2. 接着，编写一个方法，用于读取文件的文本内容。可以使用浏览器提供的File API来实现。例如： ```javascript methods: { readFile(event) { const file = event.target.files[0] const reader = new FileReader() reader.onload = () => { this.fileContent = reader.result } reader.readAsText(file) } } ``` 3. 最后，在模板中定义一个文件选择框和一个文本框，并将文件选择框的change事件绑定到上述方法。例如： ```html <input type="file" @change="readFile"> <textarea v-model="fileContent"></textarea> ``` 这样，当用户选择一个文件后，文件的文本内容就会自动显示在文本框中。 ### 回答2： 使用Vue读取文件文本内容并输入到页面文本框中，可以通过以下步骤实现： 1. 在Vue组件中，先定义一个data属性，用于存储文件文本内容和页面文本框的值。例如： ``` data() { return { fileContent: '', textValue: '' } } ``` 2. 在页面中添加一个文件选择按钮，可以通过`<input type="file" @change="handleFileSelect">`实现。当用户选择文件时，会触发`handleFileSelect`方法。 3. 在Vue组件的methods中编写`handleFileSelect`方法，用于处理文件选择事件。首先获取选择的文件，然后使用FileReader对象读取文件内容。最后将内容赋值给`fileContent`属性。例如： ``` handleFileSelect(event) { const file = event.target.files[0] const reader = new FileReader() reader.onload = (e) => { this.fileContent = e.target.result } reader.readAsText(file) } ``` 4. 在页面中添加一个文本框，用于显示文件内容。可以通过`<textarea v-model="textValue"></textarea>`实现双向绑定，将`fileContent`属性的值显示在文本框中。 5. 最后，在Vue组件的mounted钩子函数中，将`textValue`的初始值设置为`fileContent`属性的值。保证页面加载时，文本框中显示文件内容。例如： ``` mounted() { this.textValue = this.fileContent } ``` 通过以上步骤，就可以实现使用Vue读取文件文本内容并输入到页面文本框中的功能。当用户选择文件后，选中的文件内容会显示在文本框中。 ### 回答3： 使用Vue读取文件文本内容并输入到页面文本框中，可以通过以下步骤实现： 1. 在Vue的data中定义一个文本内容变量，例如textContent。 2. 创建一个input[type="file"]元素，用于用户选择要读取的文件。 3. 监听input元素的change事件，在事件处理函数中获取用户选择的文件对象。 4. 创建一个FileReader对象，用于读取文件内容。 5. 使用FileReader的readAsText()方法读取文件内容，将结果赋值给textContent变量。 6. 将textCotent变量绑定到页面文本框的value属性上，以显示文件内容。 具体代码如下： ``` <template> <div> <input type="file" @change="readFile" accept=".txt"/> <textarea v-model="textContent"></textarea> </div> </template> <script> export default { data() { return { textContent: "" }; }, methods: { readFile(event) { const file = event.target.files[0]; const reader = new FileReader(); reader.onload = (e) => { this.textContent = e.target.result; }; reader.readAsText(file); } } }; </script> ``` 在上述代码中，input元素的change事件将调用readFile方法，并将用户选择的文件对象作为参数传递给readFile方法。在readFile方法中，通过FileReader对象读取文件内容，并将结果赋值给textContent变量。通过v-model指令，将textContent绑定到页面文本框的value属性上，将文件内容显示在文本框中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值