《前端技巧》将文本框内容变大写的几种实现方式

最新推荐文章于 2023-12-08 16:59:49 发布

tomatocc

最新推荐文章于 2023-12-08 16:59:49 发布

阅读量991

点赞数 1

分类专栏：开发栈----前端文章标签： css html

本文链接：https://blog.csdn.net/tomatocc/article/details/78431663

版权

开发栈----前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

##将文本框内容变大写的几种实现方式 ##

使用onkeyup事件进行实现。

<html>
<head>
<script type="text/javascript">
function upperCase(x)
{
var y=document.getElementById(x).value
document.getElementById(x).value=y.toUpperCase()
}
</script>
</head>
<body>
输入您的姓名： <input type="text" id="fname" onkeyup="upperCase(this.id)" />
</body>
</html>

该方式的实现原理是，在用户输入完毕后，才会将文本框的内容进行转换，换句话说，只有当你输入完毕，手离开某个按键后，才会进行转换，并且在浏览器上是可以可能到输入的小写字符.
使用**text-transform:uppercase;**CSS样式进行实现。

<html>
<head>

</head>
<body>
输入您的姓名： <input type="text" id="fname" style="text-transform:uppercase;" />
</body>
</html>

该方式的最大优点就是省代码了，不过该方式的情况下，就算你已经切换到了小写输入法，那你在文本框输入的字符只会显示大写，相比较第一种实现方式而言，你是看不到字符由小写转换为大写的过程‘

欢迎关注本人个人公众号，交流更多技术信息

在这里插入图片描述

tomatocc

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
《前端技巧》将文本框内容变大写的几种实现方式

将文本框内容变大写的几种实现方式使用onkeyup事件进行实现。<html><head><script type="text/javascript">function upperCase(x){var y=document.getElementById(x).valuedocument.getElementById(x).value=y.toUpperCase()}</scrip
复制链接

扫一扫