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

最新推荐文章于 2022-11-06 10:59:12 发布

zhaibingbinglove

最新推荐文章于 2022-11-06 10:59:12 发布

阅读量3.7k

点赞数 1

分类专栏： html5，css3

本文链接：https://blog.csdn.net/zhaibingbinglove/article/details/72675881

版权

html5，css3 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

在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个：

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zhaibingbinglove

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

js文本框验证输入整数正则html,js输入框使用正则表达式校验输入内容的实例

weixin_34138673的博客

05-31

801

js输入框使用正则表达式校验输入内容的实例js输入框输入校验/*用户名称格式判断——用户名只能为下划线、数字、字母或中文长度不超过10个字符*/function checkUserName(str) {var reg = /^[_0-9a-zA-Z\u4e00-\u9fa5]{1,10}$/;return reg.test(str);}以上这篇js输入框使用正则表达式校验输入内容的实例就是小编分享...

AngularJs教程-快速入门

fanchw的专栏

10-18

1636

AngularJs开发应用主要介绍AngularJs的特性、应用骨架、应用剖析、与服务器的交互、及简单的Demo关于AngularJsAngularJS是一款来自Google的前端JS框架。简称其为 ng 。这款框架最核心特性有：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入，等等。AngularJS框架通过TDD（测试驱动）的方式开发的，从这个角度看，AngularJS是敏捷开发的一次成

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

Angular中的input格式化（自动转成大写）

weixin_30617561的博客

03-19

535

在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

427

有时候要求用户输入的字符自动转化为大写字符。在表单中通过指令将输入框中输入的文本数据大写模版文件 <form [formGroup]="validateForm"> <nz-form-item> <nz-form-label nzSpan="4">转换大写</nz-form-label> <nz-form-control nzSpan="7"> <input nz-input formControlName

js与angularjs写的转换大小写的input

小小董的博客

04-18

563

1、angularjs写一个大小写转化的input <div class="form-group"> <label for="page_code" class="control-label">三字母code:{{ code_name }}</label> <input class="f

Angular4_CSS控制input输入变大写,并且不影响placeholder的样式

Martin 的博客

03-21

866

CSS通过设置input输入框的style来实现。text-transform: uppercase /转为大写/text-transform: lowercase /转为小写/text-transform: capitalize /单词首字母转为大写/ <input type="text" [ngClass]="{'confirmBox': enableWarningStyle, 'con...

AngularJS变量及过滤器Filter用法分析

10-21

`这行代码创建了一个名为titlecase的过滤器，它的作用是将输入的文本每个单词的首字母大写。在HTML中使用这个过滤器，可以通过`{{name|titlecase}}`来调用。总的来说，AngularJS的变量和过滤器是实现动态交互界面...

angularjs学习总结(~~很详细的教程) 适合快速了解angularjs整体结构有个整体印象

热门推荐

麦田中的麦田鱼<・)))><<的博客

01-27

1万+

1 前言前端技术的发展是如此之快，各种优秀技术、优秀框架的出现简直让人目不暇接，紧跟时代潮流，学习掌握新知识自然是不敢怠慢。 AngularJS是google在维护，其在国外已经十分火热，可是国内的使用情况却有不小的差距，参考文献/网络文章也很匮乏。这里便将我学习AngularJS写成文档，一方面作为自己学习路程上的记录，另一方面也给有兴趣的同学一些参考。首先我自己也是一名学

使用AngularJS构建可重用的组件

# 1. 简介 ## 1.1 AngularJS的概述 AngularJS是由Google开发的一款前端JavaScript框架，旨在简化单页面应用（SPA）的开发流程。...AngularJS正是以组件为核心来进行开发的，因此在复杂应用的开发中具有明显

vue.js 大小写转换

05-03

NULL 博文链接：https://fanshuyao.iteye.com/blog/2434687

html首字母大写,CSS实现英文单词的首字母大写

weixin_32290249的博客

05-31

881

text-transform 属性用来控制文本的大小写，是CSS2.1的属性，兼容性问题不大。属性值是关键字，有4+1种，这个1是实验性属性值。/* Keyword values */text-transform: capitalize;text-transform: uppercase;text-transform: lowercase;text-transform: none;text-tra...

经典数字转换成大写金额函数（测试可用）

yiyisuifeng的专栏

11-08

1317

// 数字转换成大写金额函数 function atoc(numberValue){ var numberValue=new String(Math.round(numberValue*100)); // 数字金额 var chineseValue=""; // 转换后的汉字金额 var String1 = "零壹贰叁肆伍陆柒捌玖"; // 汉字数字 var String2 = "万仟佰

总结：jquery操作html时小写变大写==很诡异

JAVA_EE技术探讨

02-08

541

<div id='a'></div> $("#a").html("<abc name='d'>test</abc>"); alert($("#a").html()); 以上代码执行结果为：<ABC name="d">test</ABC> 可以发

angular js 大小写转换

qq_33159000的博客

07-18

1797

angular js 大小写转换。如：itemName 转换为item_name fiel为传递过来的数组 $scope.toLower = function(field) { if(angular.isArray(field)){ angular.forEach(field, function(value){ var newValue = ''; for(var i=0;i

js实现文本框中英文字母全部转换成大写

syy的博客

11-06

540

js实现输入框字母大小写转换

Angular7 大小写语法ts

Sicily_winner的博客

04-19

1689

ts 其实和js差不多 js实现字母大小写转换主要是用到了四个js函数，toLocaleUpperCase，toUpperCase，toLocaleLowerCase，toLowerCase 下面就这四个实现大小写转换的js函数逐一做简单的分析。 toLocaleUpperCase 将字符串中所有的字母字符都将被转换为大写的，同时适应宿主环境的当前区域设置。 toUpperCase 将字符串...

Angular4_管道转换大小写

Martin 的博客

12-04

2306

Angular4_管道转换大小写

Vue 使用户输入的字母自动转换成大写，并同步到数据

f18855666661的博客

07-02

5670

平时的业务中，有时需要将用户输入的字母直接转换成大写，并且同步到数据。我们可以使用 Vue computed 中的 get 和 set 完美的完成这个需求，看下面的代码实例： <template> <div id="app"> <el-input v-model="nameComputed" placeholder="输入字母会自动转换成大写" clearable></el-input> <.

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输入的字母自动转换成大写的效果了。