HTML、angularjs、页面输入框里输入字母自动转换为大写

最新推荐文章于 2022-11-06 10:59:12 发布
最新推荐文章于 2022-11-06 10:59:12 发布
阅读量3.6k 收藏
点赞数 1
分类专栏： html5，css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaibingbinglove/article/details/72675881
版权

在HTML中输入的内容是字母小写的话自动转变为大写：


1.页面上可以先用text-transform:uppercase;这个样式，

<input type="text" style="text-transform:uppercase;" class="pt" ng-model="Number" placeholder="请输入数字号">

2.js处理代码，
$scope.Number = $scope.Number.toUpperCase();  //这样就可以实现数据是大写了
只是在样式上看到的是大写样式，但是字段值还是原来的大小写，所以要用的步骤2，处理成大写。



简单介绍下text-transform 样式:
通过这个CSS，就可以将字母转变为大写。
text-transform的取值有4个：

 
 
  1. none：默认值，不会发生任何转换
  2. capitalize：每个单词的首字母大写。
  3. uppercase：大写转换。
  4. lowercase：小写转换。

zhaibingbinglove
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
输入框内容自动转换为大写字母
08-29
提供自动转换功能：将输入的英文字母转换为大写英文字母
angularJs函数使用方法（大小写转换，拷贝，扩充对象）
泠泠似水
05-27 2778
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="angular.min.js"></script> </head> <body> <div ng-app="module" ng-controller="ctrl"></div> <script> var m = angula
Anuglar中的常用通道-大小写转换、日期转换、小数位数、Json、slice、管道链
BADAO_LIUMANG_QIZHI的博客
04-24 443
场景 angular中的管道(pipe)是用来对输入的数据进行处理，如大小写转换、数值和日期格式化等。 Angular介绍、安装Angular Cli、创建Angular项目入门教程： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017 Angular新建组件以及组件之间的调用： https://blog...
AngularJs函数之大小写转换、对象深拷贝、对象扩充、数据遍历
KHOST的博客
02-12 520
1、打印AngularJs的版本号：1var m = angular.module('app', []);2m.controller('ctrl', ['$scope', function($scope){3    console.log(angular.version);4}]);2、大小写转换：1var m = angular.module('app', []);2m.controller('...
js与angularjs写的转换大小写的input
小小董的博客
04-18 553
     1、angularjs写一个大小写转化的input   &lt;div class="form-group"&gt;            &lt;label for="page_code" class="control-label"&gt;三字母code:{{ code_name }}&lt;/label&gt;            &lt;input class="f
js实现文本框中英文字母全部转换成大写
syy的博客
11-06 496
js实现输入框字母大小写转换
Angular中的input格式化（自动转成大写）
weixin_30617561的博客
03-19 486
在ng的实际开发中，我们会遇到很多变态的需求（哈哈），这里主要是讲解一下怎么格式化input输入框的值： 1、HTML结构 <input input-uppercase ng-model="test" type="text" class="form-control"> 2、编写指令 var app = angular.module('myApp',[]); app...
Angular 学习笔记83：在表单中通过指令将输入框中输入的文本数据大写
W先生
08-12 402
有时候要求用户输入的字符自动转化为大写字符。 在表单中通过指令将输入框中输入的文本数据大写 模版文件 <form [formGroup]="validateForm"> <nz-form-item> <nz-form-label nzSpan="4">转换大写</nz-form-label> <nz-form-control nzSpan="7"> <input nz-input formControlName
经典数字转换成大写金额函数 （测试可用）
yiyisuifeng的专栏
11-08 1280
// 数字转换成大写金额函数 function atoc(numberValue){ var numberValue=new String(Math.round(numberValue*100)); // 数字金额 var chineseValue=""; // 转换后的汉字金额 var String1 = "零壹贰叁肆伍陆柒捌玖"; // 汉字数字 var String2 = "万仟佰
Angular7 大小写语法ts
Sicily_winner的博客
04-19 1649
ts 其实和js差不多 js实现字母大小写转换主要是用到了四个js函数，toLocaleUpperCase，toUpperCase，toLocaleLowerCase，toLowerCase 下面就这四个实现大小写转换的js函数逐一做简单的分析。 toLocaleUpperCase 将字符串中所有的字母字符都将被转换为大写的，同时适应宿主环境的当前区域设置。 toUpperCase 将字符串...
填写表单的时候如何实现输入框里面字母大写转小写
12-13
相信大家都试过，填写表单的时候，无论怎么敲，在输入框里面显示的都是大写字母。下面我们就来说说它是怎么实现的。 一 js 方式 复制代码代码如下: <input name=”htmer” type=”text” onkeyup=”this.value=...
输入框自动提示，字母小写转大写
06-01
输入框输入车牌号，根据首字母自动提示车牌所属省份信息，并能自动字母小写转大写，限制输入长度
HTML5为输入框添加语音输入功能的实现方法
09-27
本文给大家介绍如何使用html5为输入框添加语音输入功能，实现方法很简单，需要的朋友参考下本
springboot(酒店管理系统)
04-25
开发语言：Java JDK版本：JDK1.8（或11） 服务器：tomcat 数据库：mysql 5.6/5.7（或8.0） 数据库工具：Navicat 开发软件：idea 依赖管理包：Maven 代码+数据库保证完整可用，可提供远程调试并指导运行服务（额外付费）～ 如果对系统的中的某些部分感到不合适可提供修改服务，比如题目、界面、功能等等... 声明： 1.项目已经调试过，完美运行 2.需要远程帮忙部署项目，需要额外付费 3.本项目有演示视频，如果需要观看，请联系我 4.调试过程中可帮忙安装IDEA，eclipse，MySQL，JDK，Tomcat等软件 重点： 需要其他Java源码联系我，更多源码任你选，你想要的源码我都有！ 需要加v19306446185
BP神经网络matlab实例.doc
最新发布
04-25
数学模型算法
设计.zip
04-25
设计.zip
基于 Spring Cloud 组件构建的分布式服务架构
04-25
Java SSM项目是一种使用Java语言和SSM框架（Spring + Spring MVC + MyBatis）开发的Web应用程序。SSM是一种常用的Java开发框架组合，它结合了Spring框架、Spring MVC框架和MyBatis框架的优点，能够快速构建可靠、高效的企业级应用。 1. Spring框架：Spring是一个轻量级的Java开发框架，提供了丰富的功能和模块，用于开发企业级应用。它包括IoC（Inverse of Control，控制反转）容器、AOP（Aspect-Oriented Programming，面向切面编程）等特性，可以简化开发过程、提高代码的可维护性和可测试性。 2. Spring MVC框架：Spring MVC是基于Spring框架的Web框架，用于开发Web应用程序。它采用MVC（Model-View-Controller，模型-视图-控制器）的架构模式，将应用程序分为模型层、视图层和控制器层，提供了处理请求、渲染视图和管理流程的功能。 3. MyBatis框架：MyBatis是一个持久层框架，用于与数据库进行交互。它提供了一种将数据库操作与Java对象映射起来的方式，避免了手动编写繁琐的SQL语句，并提供了事务管理和缓存等功能，简化了数据库访问的过程
【微信小程序毕业设计】书店系统开发项目(源码+演示视频+说明).rar
04-25
【微信小程序毕业设计】书店系统开发项目(源码+演示视频+说明).rar 【项目技术】 微信小程序开发工具+java后端+mysql 【演示视频-编号：246】 https://pan.quark.cn/s/cb634e7c02b5 【实现功能】 用户信息管理，图书信息管理，图书类型管理，图书留言管理，论坛信息管理等
基于java的-44-17-宠物销售系统-源码.zip
04-25
提供的源码资源涵盖了Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 适合毕业设计、课程设计作业。这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。 所有源码均经过严格测试，可以直接运行，可以放心下载使用。有任何使用问题欢迎随时与博主沟通，第一时间进行解答！
html input 输入的字母自动转换成大写
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输入的字母自动转换成大写的效果了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值