如何使用Angular JS在HTML中限制文本框长度
Angular JS是一种流行的前端开发框架，可以帮助开发人员构建动态、可交互的Web应用程序。如果你想在HTML中限制文本框的长度，可以使用Angular JS提供的一些指令和功能。
首先，你可以使用ng-model指令将文本框与Angular JS中的模型绑定起来。这样，当用户在文本框中输入文本时，Angular JS会自动更新模型中的值。
然后，你可以使用ng-maxlength指令来限制文本框的最大长度。该指令可以在文本框中添加一个最大字符数的属性，超过该长度的输入将被阻止。
以下是一个使用Angular JS限制文本框长度的示例：
<!DOCTYPE html>
<html>
<head>
<title>限制文本框长度示例</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="myText" ng-maxlength="10" placeholder="最大长度为10">
<p>剩余字符数: {{10 - myText.length}}</p>
</div>
<script>
angular.module('myApp', [])
.controller('myCtrl', function($scope) {
$scope.myText = '';
});
</script>
</body>
</html>在上面的示例中，我们使用ng-maxlength指令将文本框的最大长度设置为10个字符。当用户输入的字符数超过10时，将无法再输入更多的字符。我们还使用插值表达式{{10 - myText.length}}显示剩余字符数。
推荐的腾讯云相关产品和产品介绍链接地址如下：
- 云服务器（CVM）：腾讯云的云服务器产品，可用于部署和运行各种应用程序。详情请参考腾讯云云服务器。
- 云数据库MySQL版（TencentDB for MySQL）：腾讯云提供的一种托管式关系型数据库服务，适用于存储和管理应用程序的数据。详情请参考腾讯云云数据库MySQL版。
- 腾讯云对象存储（COS）：腾讯云的对象存储服务，可用于存储和管理各种文件和多媒体资源。详情请参考腾讯云对象存储。
请注意，以上只是腾讯云提供的一些相关产品示例，你可以根据实际需求选择适合的产品。
相关·内容
参见这个Plunkr：
将文本键入为"_______what___ever_____“(没有引号&_表示空格)。
角是从模型(这是我想要的行为)中移除空格(从前面和后面，而不是在中间)，但是我的文本框保留了空格。
如何也从文本框中删除空格？也就是说，我希望文本框也能反映模型中的值。
编辑：更好地解释了我的需求。
For例如：如果我键入"___What_Ever____“(没有引号&_ is空格)，
1)我的文本框将显示我输入的相同内容，即"___What_Ever____“
2)我的模型会告诉我“什么”。
我希望我的文本框的价值也是“任何时候”。
HTM
浏览 4提问于2016-10-17得票数 3
回答已采纳
大家好，我是angularjs的新手，我们想实现一个输入文本框，它只允许6位数字，在输入6位数字后，用逗号分隔将添加并输入另外6位数字。你能帮帮我吗。我们现在拥有的示例代码是
**html**
<div ng-controller="MyCtrl">
<input type="text" ng-model="number" required="required" numbers-
only="numbers-only" />
</div>
Angular js控制器
浏览 0提问于2015-03-24得票数 2
我是Angular js的新手。‘this’操作符会很有帮助，但不知道如何使用它。
在第一列中，用户将输入数据，并相应地获取数据。现在数据从php获取到Angular js，但是如何使用"this“操作符将数据从angular js推送到文本框中。
例如:如果输入'Y‘，则X和Z应推入文本框如果输入'Q’，则应将P和R推入文本框。HTML：
<tr>
<td><input type="text" ng-model="bot.Wo_Id" /></td>
<td>&
浏览 1提问于2017-05-17得票数 0
一旦达到给定数量的单词或字符(不包括空格)，我正试图限制表单字段中文本框的长度。
我遇到的问题是，一旦达到上限，我就不知道如何限制子字符串最大长度变量。
我使用Callable.js ()作为计数器脚本。
var wordL = 3;
var charL = 18;
var boxid = 'descr';
var area = document.getElementById(boxid);
function fixlength(boxid,wordlimit,charlimit,wordcount,charcount,allcount) {
浏览 2提问于2016-03-08得票数 0
回答已采纳
1回答
下面是我的angularjs代码，当我试图在文本框中输入任何文本时，它不会出现在绑定中。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/angular.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('co
浏览 1提问于2015-02-04得票数 1
回答已采纳
我正在尝试在文本框中键入文本，并且需要选择此值进行筛选。如何在angularJs中选择文本框值
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.0/angular.min.js"></script>
</head&
浏览 1提问于2015-04-28得票数 0
2回答
我正在尝试使用angular-route.js库路由一些东西，但我不知道如何正确地执行。
当浏览器路由改变时，我想要更改一条消息，但是这样做有很多错误。
index.html
<!doctype html>
<html ng-app="my-app">
<head>
<title>Angular controllers</title>
<meta name="viewport" content="width=device-width, initial-scale=1&#
浏览 4提问于2015-06-24得票数 1
回答已采纳
<tr class="searchrow1">
<td class="createcolumn1" >
<font class="texto1"><bean:message key="booktypForm.booktypDesc"/>:</font>
</td>
<td class="
浏览 2提问于2011-12-15得票数 0
这是angularjs映射和文本框创建代码。我需要的是，当用户在文本框中输入一个地点，并在按下enter后，该地点应在地图中指示……请帮帮我..。先谢谢你...
<html ng-app="angular-google-maps-example">
<head>
<meta charset="UTF-8">
<title>angular-google-maps example</title>
<style>
.angular-google-map {
disp
浏览 1提问于2015-12-10得票数 1
我正在尝试angularjs模式弹出指令。在弹出窗口中，我使用了tabs和panes指令。我有一个两个文本框(都有相同的ng-model=myName)，一个在我的主页中，另一个在我的弹出窗口中。如果我更改主页中的值，它将在弹出文本框中更新，但当我更改弹出文本框时，主页文本框不会更新。如何修复它。
// html page
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng
浏览 0提问于2013-02-21得票数 0
回答已采纳
我正在使用AngularJS中的控制器，尝试找出在文本框中输入的两个数字的和，并在第三个文本框中显示结果。但是我没有得到答案。下面是我尝试过的代码：
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1> ANGULAR JS</h1>
<script src="https:
浏览 0提问于2019-03-05得票数 4
我希望允许用户在文本框中仅输入正数
我的代码如下：
script.js文件内容：
angular.module("myfapp", []).controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "AngularJS";
});
angular.module('myApp', []).controller('MainCtrl', function($scope) {
app.direc
浏览 2提问于2016-01-06得票数 5
回答已采纳
1回答
我的angularjs应用程序基本上分4个步骤加载：
主HTML
所有脚本和CSS文件
$templateCache，我们叫它template.html
图片
我想，在加载起始页面时，我应该绕过$templateCache。但是现在，我想尽快开始获取template.html，也就是说，在加载脚本的同时。
我的代码中可能相关的部分如下
<script src='//ajax.googleapis.com/.../angular.min.js'></script>
<script src='/my.js'>
浏览 3提问于2014-08-05得票数 0
回答已采纳
我已经使用Angular JS创建了一个搜索，其中我从一个JSON文件中提取数据，并将其显示在页面上的一个表格中，该页面运行良好。表行和表列是由Angular ng-repeat创建的。
在表格下面添加了一个webform，它有几个字段(这是简单的html/css/js webform)。我希望一旦表行被点击，从表列中提取数据并将其推入webform输入文本框中。我尝试的是ng-click=“callfunction (传递值)，在callfunction中，我可以显示在web浏览器的控制台中传递的所有值，但我无法找到如何在webform的文本框中推送这些值，有人能帮助我吗?运行示例可以在找到
浏览 16提问于2017-03-04得票数 0
2回答
我是AngularJS的新手。想要从两个输入文本框中获取值，将它们相加，然后在第三个文本框中显示它们。
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.sum = ( $scope.a + $scope.b );
});
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.co
浏览 27提问于2020-02-19得票数 0
回答已采纳
3回答
如果用户选择“文本框-值-空”，则应禁用文本框，并清除文本框。我正在使用下面的代码来做它。但不幸的是我做不到。如果用户输入值并选择“文本框-值-空”，则文本框应清除。
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.myList = [{
text: "1",
value: "option_1"
}, {
text: "2",
value:
浏览 6提问于2017-11-29得票数 0
回答已采纳
在使用javascript单击按钮后，我正在尝试更改我的文本框值，并更改angular js的ng-model值。
Javascript代码工作正常，并更改了文本框值，但我也希望根据文本框更改我的ng-model值。
<!doctype html>
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.min.js"></script>
<s
浏览 1提问于2014-03-22得票数 1
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<title>TheNetNinja Angular Playlist</title>
<link href="content/css/styles.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/li
浏览 36提问于2018-06-07得票数 0
回答已采纳
我在html页面中有一个简单的输入：
<input type="text" class='form-control' id='card' name="myCard" ng-model='form.cardNb' card-validation>
我创建了一个函数'cadType‘，它根据这个输入中的第一个字符返回一个值：
var mainApp = angular.module("mainApp", []);
mainApp.controller('fo
浏览 11提问于2015-05-15得票数 0
回答已采纳
我是AngularJS的新手，我正在通过链接，我很好奇使用ng-bind在文本框控件上做实验。但它不起作用。
<html>
<title>AngularJS First Application</title>
<body>
<h1>Sample Application</h1>
<div ng-app="">
<p>Enter your Name: <input type="text" ng-model="n
浏览 0提问于2015-03-24得票数 10
回答已采纳
1回答
重新加载模型的ng-单击
、、、、
这是我的HTML代码：
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Angular App</title>
<script type="text/javascript" src="resources/angularJs-1.2.22/angular.js"></scr
浏览 1提问于2014-10-16得票数 1
回答已采纳
4回答
我正在尝试获取移动号码文本框的值，以使用angular.js验证其输入值。我是一个使用angular.js的新手，不太确定如何实现这些事件，并放置一些javascript来验证或操作我的html代码中的表单输入。
这是我的HTML：
<div>
<label for="mobile_number">Mobile Number</label>
<input type="text" id="mobile_number" placeholder="+6391789
浏览 6提问于2013-08-21得票数 33
回答已采纳
我有一个选择选项和一个文本框，当用户选择一个选项并在文本框中输入文本时，数据将保存在sql数据库中。我需要知道如何防止所选选项和文本从文本框中被清除，当用户按下F5时，直到在AngularJS中的一个按钮被单击，然后选择选项和文本框可以是cleared.Here是我尝试，但它不起作用。
JS
function Model($http) {
var self = this;
self.$http = $http;
var CurrentDowntimeEvent = {};
self.StartDowntimeEvent = function () {
浏览 0提问于2014-07-29得票数 0
我正在开发一个Angular应用程序，它在文本框上使用引导typeahead。当我在文本框中单击时，所有的值都显示在一个下拉列表中。我有超过1000个项目要搜索，从用户在文本框内单击到能够键入时会有延迟。如何禁止在单击文本框后弹出这些值？这是我的HTML代码
<input id="filterValue1"
class="form-control input-sm" type="text"
ng-model="modalCriteria.filterValue1"
uib-typeahead="
浏览 7提问于2017-02-18得票数 1
回答已采纳
我有一个文本框：
<input type="text" ng-model="SearchText" >
和一个链接：
<a href="#signout" ng-click="SearchText=''">Sign out</a>
我想在上面的超链接中执行这两个。ng-click转到空文本框，#signout将ng-route转出HTML和控制器。
但是我可以看到href覆盖了Angular.js中的ng-click
如何将两者同时执行？
浏览 1提问于2015-04-08得票数 15
我对AngularJS编程很陌生。任何帮助都将不胜感激。
每次单击HTML按钮时，都会创建一个HTML文本框。
在webform1.aspx提交按钮中，单击甚至无法捕获在这些文本框中输入的值。
我使用了request.form，循环在form1中的控件，但找不到动态创建的控件。
如何发布和查看从后面的代码输入到这些文本框中的数据？
请查找以下代码：
webform1.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="ht
浏览 0提问于2018-02-22得票数 1
回答已采纳
1回答
我有一个显示和比较pdf文件的角度的webapp，但是当pdf文件的大小太大时(根据我的观察，大于1,3 MB )，它不会显示它。我用一个iframe来展示它。文件源是一个base64字符串(这个源文件是正确的，因为我在一个在线base64到pdf转换器中测试了它，它显示了我的应用程序没有的所有这些文件)。
下面是我的代码(html组件)：
<div *ngIf="seite && pdfObj; else loadingPDFs">
<as-split style="height: 1080px;" direction=&
浏览 2提问于2021-03-19得票数 0
回答已采纳
我有一个具有ng-model绑定的文本框，我正在输入一个带左空格(4或5个空格)的值，并使用ng-click更改ng-model值。但是在textbox中仍然留有空格。我必须使用jquery trim来删除剩余的空格。如何在angular中做到这一点。为什么这里的文本框值不变是柱塞
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<
浏览 0提问于2016-09-17得票数 1
我有一个在运行时填充的html-select。
也就是说，当我在html输入文本框中输入内容时，我会在下面附加的html-dropdown-listbox中显示基于子串的结果。
现在我只想突出显示html下拉列表框中与html-input textbox中的字符串匹配的项目的子字符串。
例如，如果我在html-input文本框中输入"ample“，那么它应该突出显示"ample”<OPTION value=723.1> S*ample* Text </OPTION>。
我已经尝试修改该html-dropdown-listbox的innerHTML属性。我
浏览 0提问于2011-11-18得票数 1
我正在使用自定义管道与三元操作符为*ngFor，得到错误。不知道怎么解决。请帮帮忙。
html：
<div *ngFor="let x of y | limitTo: y.limit ? y.length : 10">
truncate.pipe.ts：
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'limitTo'
})
export class TruncatePipe {
transform(value: string, limi
浏览 4提问于2019-09-24得票数 0
帮助我在这个场景中有按钮在ng-重复，在按钮上点击文本框是启用，与启用的文本框，我想要一个焦点在它。还将焦点设置为文本的末尾。
var app = angular.module('app', []);
app.controller('demoController', function($scope, $timeout) {
$scope.testFocus = [{'id': 0, 'isShow': false}, {'id': 1,'isShow': false}];
$sc
浏览 4提问于2016-08-26得票数 2
回答已采纳
2回答
我在我的应用程序中使用了angular.js和html。因此，我想要自动完成一个文本框，但只有当字段"UserSearch“的长度大于3时。
我的HTML
<div class="col-sm-8">
<div class="input-group">
<input data-ng-model="UserSearch" ng-change="selectSearchType(UserSearch)" list="title" type="tex
浏览 1提问于2014-02-25得票数 1
有没有可能，以及如何开始我正在尝试做的事情。我已经成功地创建了这个：
example2.html
<head>
<title> test2 </title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<h2> Section Two </h2>
<div ng-app=""
浏览 0提问于2015-01-23得票数 0
我正在工作的角度ui-网格现在我有一个要求，在一次单元格得到复选框和在另一个单元格可编辑的文本框。
验证要求应该是，如果复选框被选中，那么该行的可编辑文本框是必填字段，我如何做到这一点。
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="
浏览 0提问于2016-03-30得票数 0
2回答
我是angularJS的新手，我在的angularJS上练习
在下面的例子中，有人说我们正在污染全球空间，但我不明白我们是如何污染全球空间的，在示例1中，在示例2中没有。
示例1
<html ng-app>
<head>
<meta charset="utf-8">
<title>Angular.js Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular
浏览 0提问于2015-06-14得票数 2
回答已采纳
2回答
我是Angular.js的初学者，在ng-include指令方面遇到了一些问题。
我想在header.html的index.html中显示内容
下面是我的树例子：
myapp
. public
. . lib
. . . angular.js
. . .
. header.html
. index.html
Header.html代码：
<h1>Hello Angular</h1>
Index.html代码：
<html ng-app>
<head>
<meta
浏览 5提问于2015-02-24得票数 0
回答已采纳
1回答
查看下面的AngularJS代码
dir.js
(function() {
var myApp = angular.module("MyApp");
myApp.directive('myMovie', function() {
return {
restrict: 'E',
transclude: 'true',
template: '<h1
浏览 0提问于2018-03-12得票数 3
回答已采纳
我没能让angular在一个新的devtool面板中工作，这个面板是我通过我的chrome扩展添加的。
没有错误，但是angular标签根本不会被解析。
我的清单是这样的：
{
"name": "LogTool",
"version": "1.0",
"manifest_version": 2,
"minimum_chrome_version": "10.0",
"devtools_page": "devtools.html",
"
浏览 2提问于2015-04-16得票数 0
我使用的是angular和google地图。在我找到的所有教程中，指令都是这样说的:添加到index.html代码中：
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY" type="text/javascript"> </script>
在这种方法中，API密钥存储在我的源代码中-不推荐这样做。
我如何在angular中以不同的方式做到这一点？
浏览 0提问于2020-04-12得票数 1
此代码通过ng-重复指令在列表中显示文本框的内容.但我注意到它没有显示复写字母。只有当字母都不同的时候才会显示出来。例如，如果我在文本框中输入abcabc，我在列表中只看到abc一次，而不是abc，我如何也可以显示重复的字母？谢谢。
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app>
<input type="text" ng-model="n
浏览 6提问于2020-10-22得票数 1
回答已采纳
如何在angularjs工厂选中文本框isEmpty？
我的HTML源是
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<input type="text&
浏览 4提问于2015-12-08得票数 1
回答已采纳
我的基于angularjs(1.2.14)的应用程序在IE10中加载得很好。但是，在IE11中，模板url被阻塞，应用程序没有正确呈现。下面是我在控制台中看到的错误。我看到这是一个已知的问题，但已经解决了()
Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy. URL: resources/partials/overview.start.html
http://errors.angularjs.org/1.2.14/$sce/insecurl?p0=resou
浏览 0提问于2014-09-16得票数 0
回答已采纳
我注意到AngularJS需要来自后端服务器的javascript结果。
示例中的当前服务器返回带有javascript的angular.callbacks._0({"key": "value"});。如何在Rails上以相同格式返回？谢谢!
默认情况下，AngularJS从该请求生成http://echo.jsontest.com/key/value?callback=angular.callbacks._0链接。
下面是我的工作示例：
<!DOCTYPE html>
<html ng-app="Simple">
<
浏览 6提问于2013-09-01得票数 0
回答已采纳
我正在使用kendo用户界面为蒙面文本框。我已经用完了电话号码和传真号码了。但我想把"“的网站文本框，这应该是可变长度字符串。我怎样才能做到这一点？我用下面的方式来获得电话号码。
@(Html.Kendo().MaskedTextBox()
.Name("phone_number")
.Mask("(999) 000-0000")
.Value("555 123 4567")
浏览 9提问于2015-07-08得票数 0
1回答
我发现我的webpack供应商包很大(最初是1.6MB)。在使用webpack包大小分析仪后，我发现角对此起了很大的作用.
➜ dapper-ui git:(master) webpack --config ./conf/webpack-dist.conf.js --json | webpack-bundle-size-analyzer
angular: 1.13 MB (25.9%)
lodash: 526.94 KB (11.8%)
moment: 429.12 KB (9.58%)
angular-ui-router: 339.35 KB (7.58%)
chart.js: 311.2
浏览 2提问于2017-03-21得票数 4
我目前正在用Angular2、NodeJS和Redis构建一个小型应用程序，其中用户信息将存储在Redis实例中。我是Redis的新手，在尝试可视化我需要创建的功能时遇到了困难。
用户通过Angular2前端在输入表单中输入单词。然后将该单词转换为不同的字符串，然后将这些值以对象的形式存储在存储中(Redis)。只需要存储最后10个项，因此存储DB的长度需要为10，其中最新的项被附加到集合中，如果长度已经是10，则最后一个项被修剪。
我很难在Redis中实现这一点，而且我在NodeJS层的Redis命令似乎没有做我想让它们做的事情。
下面是处理用户输入的NodeJS控制器：
var Confi
浏览 2提问于2017-02-23得票数 0
如何在AngularJS中查找数组大小
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Looping with objects:</p>
<ul&g
浏览 1提问于2016-03-08得票数 21
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
