input 输入框输入小写字母即时转换成大写字母

最新推荐文章于 2022-11-12 15:19:54 发布

fuxi0o_

最新推荐文章于 2022-11-12 15:19:54 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

文章标签： input输入小写即时转大写

本文链接：https://blog.youkuaiyun.com/qq_28074159/article/details/80498191

本文介绍了两种使用JavaScript实现文本框中输入文字自动转为大写的方法。第一种方法利用onkeyup事件触发函数来转换大小写；第二种方法通过CSS的text-transform属性实现相同效果，避免了输入非拉丁字符时的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.用 js 的 onkeyup 事件，即时把字母转换为大写字母：

<input type="text" value="" onkeyup="toUpperCase(this);"/>
<script type="text/javascript">
	function toUpperCase(obj) {
		obj.value = obj.value.toUpperCase()
	}
</script>

<input type="text" value="" onkeyup="this.value = this.value.toUpperCase();"/>

2.上面的方法虽然可以，但是在输入汉字的时候会受到干扰，还有一种更好的方法，直接加上 css：

<input type="text" value="" style="text-transform: uppercase;"/>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

fuxi0o_

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

tauri开发Mac电脑Safari浏览器一个很奇怪的问题：在 input 输入框输入的是全小写英文字母，会自动将首字母转换为大写解决办法

10-09

670

在 Mac 系统中默认使用Safari的内核WKWebView作为渲染引擎，而Safari浏览器的一些 “人性化” 机制：如果输入框中输入的是全小写英文，会自动将首字母转换为大写。

文本输入框input将输入转换为统一大小写

yieryi_

07-31

1万+

文本输入框input将输入转换为统一大小写，通常有两种方法：JS和CSS方法。 JS方式，通过监控key事件来做到。 key事件有三种keydown event keypress event keyup event KeyDown触发后，不一定触发KeyUp，当KeyDown 按下后，拖动鼠标，那么将不会触发KeyUp事件。 2.KeyPress主要用来捕获数字(注意：包括Shift+数字

参与评论您还未登录，请先登录后发表或查看评论

文本框Input中字母大写小写转换的代码

11-08

首先，要实现的是在文本框输入大写字母自动转换为小写, 其次，在文本框输入小写字母自动转换为大写, 以及使用CSS实现的方法，这个方法可以实现表面上的小写转大写，但是在提交表单和复制粘贴时是不起作用的.

Input输入小写即时转大写

Baby_lucy的博客

08-30

2917

//将输入内容转成大写 <input type="text" name="test1" onkeyup="this.value = this.value.toUpperCase();"/> //将输入内容转成小写 <input type="text" name="test2" onkeyup="this.value = this.value.toL

在input输入框控制小写转大写

chuan6699的博客

09-16

499

<input name="htmer" type="text" onkeyup="this.value=this.value.toUpperCase()" />

input输入框小写字母自动转换成大写字母的几种方式

恒二哥的博客

11-12

5597

2.还有一种更好的方法，加css样式进行控制处理，用到：text-transform属性，将其设置为uppercase。如果想屏蔽中文和空格：用 onkeyup=“value=value.replace(/[^\w./]/ig,‘’)”text-transform: capitalize /单词首字母转为大写/text-transform: uppercase /转为大写/text-transform: lowercase /转为小写/输入小写时，自动显示为大写，中文汉字不受影响。

input框输入小写自动变大写

05-30

808

//小写字母自动转换大写字母 $("#carno_").bind("input propertychange", function() { var str=$("#carno_").val(); str=str.toUpperCase(); $("#carno_").val(str); }); 转载于:https://www.cnblogs.com/wutao123...

输入框自动提示，字母小写转大写

06-01

当用户在输入框中输入车牌号时，可以通过监听`input`事件，在每次字符改变后立即转换首字母为大写。同时，为了限制输入长度，可以使用`maxLength`属性设置输入框的最大长度，确保用户不能输入超过规定的字符数。在...

js实现用户输入的小写字母自动转大写字母的方法

10-20

在JavaScript编程语言中，将用户输入的小写字母自动转换为大写字母是一项常见的需求，尤其在处理表单数据或者实时验证用户输入时。本篇文章将详细介绍如何使用JavaScript实现这一功能。首先，JavaScript提供了内置...

填写表单的时候如何实现输入框里面字母大写转小写

09-25

在填写网络表单时，经常遇到无论怎样输入字母，输入框中显示的都是大写的情况。这种情况下，字母大写转小写功能就显得尤为重要。实现字母在输入框中的大小写转换可以通过多种技术手段实现，其中最常见的方法是使用...

input输入框输入小写字母自动转换成大写字母

人间草木

04-22

3167

input输入框输入小写字母自动转换成大写字母有两种方法 1.用js onkeyup事件，即时把字母转换为大写字母： html里input加上 <input type="text" id="txt1" value="" onkeyup="toUpperCase(this)"/> 2.js写函数 function toUpperCase(obj) { obj.v...

input框小写转大写错误写法

malin970824的博客

07-24

243

以下样式只表示显示的大写，input本身的value，不会改变。要改变value值，保存才有效。js与java写法如下： value.toUpperCase(); style="text-transform:Uppercase;"

input输入框内的字母自动转变为大写

qq_39016071的博客

11-18

1902

1、使用JavaScript，在input标签添加onkeyup方法，将字符转为大写。 <input name="text" type="text" onkeyup="this.value=this.value.toUpperCase()" /> 2、使用CSS，给input设置样式。 <input type="text" style="text-transform:u...

input输入框输入大小写字母自动转换

weixin_30790841的博客

05-05

2337

input输入框输入小写字母自动转换成大写字母有两种方法 1.用js onkeyup事件，即时把字母转换为大写字母： html里input加上 <input type="text" id="txt1" value="" onkeyup="toUpperCase(this)"/> js写函数 1 function toUpperCase(obj) 2 { 3...

懒人必备：输入框字母自动转换大写省时省力

希望看完文章的你能够带着答案离开。

10-22

4879

懒人必备：输入框字母自动转换大写省时省力

input将输入转换为统一大小写

weixin_42481234的博客

08-29

2586

1. JS方式，通过监控key事件来做到。 key事件有三种 keydown event keypress event keyup event <input name="htmer" type="text" onkeyup="this.value=this.value.toUpperCase()" /> 注：采用js方式还是会有转换过程的体现。如输入a，会先显示a然后触发k...

HTML文本框录入字母自动大写

最新发布

09-05

### 回答1：可以使用JavaScript在HTML input输入字母时自动将其转换为大写。可以在input元素的oninput事件中添加一个监听器，并在其中调用JavaScript的toUpperCase()方法来转换输入的字母。例如： ```html <input type="text" oninput="this.value = this.value.toUpperCase()"> ``` 或者在js中 ```js document.querySelector("input").addEventListener("input", function(){ this.value = this.value.toUpperCase(); }); ``` ### 回答2：在HTML中，可以使用CSS来实现输入的字母自动转换成大写。具体实现步骤如下：首先，在HTML的input标签中添加一个属性，即"onkeyup"。这个属性用于指定输入内容发生变化时所触发的事件。值得注意的是，onkeyup是在用户释放按键时触发的事件。接着，在onkeyup事件触发时，调用一个自定义的JavaScript函数来实现字符串的大写转换。 JavaScript函数的实现如下： ``` <script> function uppercase(input) { input.value = input.value.toUpperCase(); } </script> ``` 然后，在input标签的onkeyup事件中调用这个函数。代码如下： ``` <input type="text" onkeyup="uppercase(this)"> ``` 当用户在输入框中输入字母时，onkeyup事件会触发，然后调用uppercase函数将输入的字母转换成大写，并将结果显示在输入框中。这样，无论用户输入的是小写字母还是大写字母，在输入框中都会显示为大写字母。 ### 回答3：要使HTML的input输入的字母自动转换成大写，可以使用HTML的oninput事件和JavaScript的toUpperCase()方法来实现。首先，在HTML中定义一个input元素，例如： ``` <input type="text" id="myInput" oninput="convertToUpper()" /> ``` 接下来，在JavaScript中定义一个函数convertToUpper()，该函数会在每次输入改变时被触发： ``` <script> function convertToUpper() { var inputElement = document.getElementById("myInput"); inputElement.value = inputElement.value.toUpperCase(); } </script> ``` 在这个函数中，我们首先通过getElementById()方法获取到输入框的元素，然后使用toUpperCase()方法将输入框的值转换成大写，并将新的值赋回给输入框的value属性。这样，每当用户在输入框中输入字母时，都会自动转换成大写字母。这种转换是即时的，用户一键一打就可以看到输入的字母变成大写了。通过上述方法，就可以实现在HTML的input输入的字母自动转换成大写的效果了。