js前端的input输入框英文自动转为大写字母方法

最新推荐文章于 2024-09-12 16:22:05 发布
最新推荐文章于 2024-09-12 16:22:05 发布
阅读量1.9k 收藏 2
点赞数
分类专栏： js 文章标签： javascript 正则表达式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hzh2031015/article/details/120778948
版权

在写项目时，产品要求特殊输入框需要自动将小写英文字母转为大写字母

在input框的方法中有一个oninput的事件名字

oninput 事件在用户输入时触发。 该事件在 或 元素的值发生改变时触发

在这里说一下oninput和onchange的区别

oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。

在输入的时候自动转换所以我们要使用oninput事件

例如
οninput=“value=value.toUpperCase()”
如果value不能用,看下边的方法
οninput=“this.value=this.value.toUpperCase()”

我的项目中由于还用到了正则表达式，反复尝试后 ，↓即可

oninput="this.value=this.value.replace(/[^\w]/g,'').toUpperCase()"

阿笙@叶
关注
专栏目录
工作总结：按字母排序下拉框，点击首字母，跳转到对应位置
liyunhe8451
10-24 2902
应需求要求，最近要做一个类似于手机端首字母排序的下拉框。 整理了一下思路，大概分为一下几个步骤： 由于数据库中的字段没有存首字母的信息，所以要将sql改造 在后台处理相关数据，将取得的数据按英文字母排序 前台写一个统一的js方法，以便不同位置统一调用 其实后台和sql语句没有什么难点，主要是前端的样式，滚动条滚动，点击跳转滚动条。 1）sqlSELECT ID AS id, BRAND A
前端——JS基础
xzy990727的博客
08-10 1057
JavaScript JS：轻量级的客户端脚本编程语言 编程语言 html和css是标记语言 编程语言是具备一定的逻辑的，拥有自己的编程思想（面向对象编程【OOP】，面向过程编程） ——面向对象：C++，Java，PHP，C#，JS ——面向过程：C 目前JS不仅仅是客户端语言，基于NODE可以做服务器端程序，所以JS是全栈编程语言 学习JS，学习它的及部分组成 JS的组成以及ES 1.JS组...
输入框内容自动转换为大写字母
08-29
提供自动转换功能：将输入的英文字母转换为大写英文字母
JS 将当前input 转为大写
billhepeng的专栏
04-18 3045
方法1:JS 方法   此种方法不好在于,光标始终在最后一个字段没办法移动     http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 看看用CSS方法最完美的方法.
JS实现字母大小写转换（附代码）
最新发布
be willing to share
09-12 637
点击该按钮后，inputA 中的值将变为首字母大写，其他字母变为小写，结果显示在 inputB 中。：点击该按钮后，inputB 中的值将被复制到剪贴板，并弹出一个提示框显示复制的内容。：点击该按钮后，inputA 中的值将转换为大写，并显示在 inputB 中。：点击该按钮后，inputA 中的值将转换为小写，并显示在 inputB 中。
js实现文本框中英文字母全部转换成大写
syy的博客
11-06 569
js实现输入框字母大小写转换
JS 将输入框中输入的英文字母自动转换为大写的方法
grootbaby
10-16 2238
输入框中小写字母自动转换为大写 方法一 用表单输入框的 onkeyup 属性和 JavaScript 的 toUpperCase() 方法来实现 oninput="value=value.toUpperCase()" 方法二 网上搜索方法，以下方法会默认先显示输入的小写字母再置空，用户体验不是很好 oninput="value=value.replace(/[^0-9A-Z]/g,'')" 方法三 Vant 组件有个formatter 属性可以用 toUpperCase() 方法默认将.
《前端技巧》文本框输入字母变为大写
tomatocc的博客
08-31 4132
今天遇到了一个需求，在页面的文本框里面输入的字母要自动转换为大写。 随即想到了有一种方法可以将小写变为大写的js代码，页面显示效果如下。 不过后来发现了一个更加强大的功能，那就是css里面竟然后这个样式，让input文本框里面只允许大写字母。style="text-transform:uppercase;"项目中的代码如下： <input class="input-text" name="In
2022年web前端面试题
weixin_45675581的博客
02-04 7008
web前端面试题分为：html/css面试题、javascript面试题、vue面试题、性能优化面试题、网络方面面试题等等，那么在2022年，web前端面试题有哪些呢？ 可以来小鹿线看看面试题视频https://xuexiluxian.cn/ 第一章 面试题基础篇 1.1 HTML面试题 面试题：行内元素有哪些？块级元素有哪些？ 空(void)元素有哪些？ 行内元素：span、img、input… 块级元素：div、footer、header、section、p、h1…h6… 空元素：br、hr… ​ ​
React 全家桶含自定义hook的方法
小王的技术库
06-09 533
React：用于构建用户界面的 JavaScript 库。由 开发且开源。原生 JavaScript 的痛点：React 的特点：相关 JS 库： 创建虚拟 DOM 的两种方式：JS 和 JSX 使用 JS 创建虚拟 DOM 比 JSX 繁琐 JSX 可以让程序员更加简单地创建虚拟 DOM，相当于语法糖 最终 babel 会把 JSX 语法转换为 JS JS创建 JSX创建（最终babel转为js） 虚拟 DOM && 真实 DOM 关于虚拟 DOM： JSX JSX 简介 全称：JavaScri
表单元素输入框 输入字母自动转大写
weiqiang915的博客
10-28 328
<input value="" class="toUp"/> CSS即可实现： .toUp { text-transform: uppercase; } js也可实现（有延迟）： $('.toUp').keyup(function () { $(this).val($(this).val().toUpperCase()); });
js实现用户输入的小写字母自动转大写字母的方法
10-20
下面小编就为大家带来一篇js实现用户输入的小写字母自动转大写字母的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
input输入框小写字母自动转换成大写字母的几种方式
恒二哥的博客
11-12 5005
2.还有一种更好的方法，加css样式进行控制处理，用到：text-transform属性，将其设置为uppercase。如果想屏蔽中文和空格：用 onkeyup=“value=value.replace(/[^\w./]/ig,‘’)”text-transform: capitalize /单词首字母转为大写/text-transform: uppercase /转为大写/text-transform: lowercase /转为小写/输入小写时，自动显示为大写，中文汉字不受影响。
JS input中鼠标选中英文转大写
甘乐2333的博客
06-03 253
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" name="user" id="user"/...
不用 JavaScript 实现文本框内容字母自动大写
04-23 2160
向文本框输入文字时，如何让小写字母自动变为大写呢？很多人想到用 JavaScript，比如： 但这并不好，原因有二： 效果不好，我们会看到：先显示小写，再变成大写； 如果我用鼠标右键的复制、粘贴，就无法触发事件。 有人说，把 onkeyup 改为 onchange 怎么样？onchange 更糟，因为 onchange 只有在焦点移开的时候才触发。 有人又说，那把 onkey
js实现用户输入的小写字母自动转大写字母
acongshijia的专栏
09-29 7005
function toUpperCase(obj) { obj.value = obj.value.toUpperCase() }
js 小写字母与大写字母相互转换
qq_26889291的博客
05-24 1403
//小写字母转大写字母 console.log('abcdA'.toUpperCase()); //大写字母转小写字母 console.log('ABCD'.toLowerCase());
input输入英文自动转换为大写的方法
weixin_33681778的博客
03-27 1607
大小写转换样例： <input name="htmer" type="text" onkeyup="this.value=this.value.toUpperCase()" /> 复制代码 采用js方式还是会有转换过程的体现。如输入a，会先显示a然后触发keyup事件后，将a转换为A CSS通过设置input输入框的style来实现。 text-transform: up...
js验证input输入框只能输入数字或字母
03-28
可以使用正则表达式来实现这个功能，具体代码如下： ```html <!DOCTYPE html> <html> <head> <title>Input Validation</title> <script> function validateInput() { var input = document.getElementById("inputField").value; var regex = /^[a-zA-Z0-9]+$/; if (regex.test(input)) { alert("Valid input!"); } else { alert("Invalid input! Only letters and numbers are allowed."); } } </script> </head> <body> <label for="inputField">Input:</label> <input type="text" id="inputField"> <button onclick="validateInput()">Validate</button> </body> </html> ``` 在这个例子中，我们首先使用JavaScript函数`validateInput()`来获取输入框的值，并定义了一个正则表达式`/^[a-zA-Z0-9]+$/`，它只允许输入字母和数字，不允许其他字符。然后我们使用`test()`函数来检查输入框的值是否符合正则表达式的要求，如果符合就弹出“Valid input!”的提示框，否则弹出“Invalid input! Only letters and numbers are allowed.”的提示框。最后，我们在HTML中添加一个按钮，并将`validateInput()`函数与按钮的`onclick`事件绑定，这样当用户点击按钮时就会执行验证函数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值