如何在html中给出特定的输入类型？
Posted
技术标签:
【中文标题】如何在html中给出特定的输入类型？【英文标题】：How to give specific input type in html? 【发布时间】：2019-10-03 07:11:57 【问题描述】：我有一个输入字段“尺寸”，它可以接受像(21 x 12, 12"4' x 21" 12' 这样的值。如何控制 html 中的输入字段，使其仅允许用户输入数字和(X,',"")，并限制其他字符和字母？我使用 AngularJS 作为虚拟机控制器
<div class="clearfix">
<div class="col-xs-4 pad-0">
<label>Size</label>
</div>
<div class="col-xs-8 pad-col-7">
<div class="form-group ">
<md-input-container class="block typefield">
<input type="number" ng-model="vm.MappedMediaLineItem.UnitSize">
</md-input-container>
</div>
</div>
</div>
现在我使用类型作为数字，但它不允许我输入 X,',""
【问题讨论】：
这个问题：HTML5 restricting input characters 可能对你有帮助 【参考方案1】：你可以试试这个
<div ng-app="myModule">
<div ng-controller="myController">
<input type="text" ng-model="searchTerms" ng-keypress="searchKeyup($event)" placeholder="">
</div>
</div>
在控制器中
var module = angular.module("myModule", []);
module.controller("myController", function($scope)
$scope.searchKeyup = function (e)
var keyCode = (e.keyCode ? e.keyCode : e.which);
if ((keyCode >= 48 && keyCode <= 57) || (keyCode === 120) || (keyCode === 39) || (keyCode === 34))
console.log("true");
else
console.log("false");
e.preventDefault();
;
);
从这里知道密钥代码https://keycode.info/
【讨论】：
我在 true 条件下尝试了vm.MappedMediaLineItem.UnitSize = vm.MappedMediaLineItem.UnitSize + $event.key ani vm.MappedMediaLineItem.UnitSize = vm.MappedMediaLineItem.UnitSize 在 false 条件下，结果我在 true 条件下得到两个值，在 false 条件下得到一个值，例如：- 如果我输入 x（这是有效）我在输入字段上得到 xx，如果我输入 p（这是错误条件）我在输入字段上得到 p 我该如何解决这个问题？
确保您的输入类型是文本而不是数字。
终于完成了，谢谢
keyCode 和 which 均已弃用。您应该改用key 或code。我还建议您看看这个其他关键检查工具：keyjs.dev【参考方案2】：
可以使用ng-pattern 指令：
<input ng-model="unitSize" ng-pattern="regex">
有关详细信息，请参阅
AngularJS ng-pattern Directive API ReferenceThe DEMO
angular.module("app",[])
.controller("ctrl", function($scope)
$scope.regex='[\\d+xX' + '\\"' + "\\'" + ']+';
)<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
unitSize=unitSize<br>
<input ng-model="unitSize" ng-pattern="regex">
</body>【讨论】：
【参考方案3】：您可以使用正则表达式来限制数字和乘号或其他自定义
<input ng-model="vm.MappedMediaLineItem.UnitSize"
restrict-input="regex: '^[13579*]*$'"/>
自定义限制 - 奇数只用乘法 - > vm.MappedMediaLineItem.UnitSize
app.directive('restrictInput', function()
return
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attr, ctrl)
ctrl.$parsers.unshift(function(viewValue)
var options = scope.$eval(attr.restrictInput);
if (!options.regex && options.type)
switch (options.type)
case 'digitsOnly': options.regex = '^[0-9]*$'; break;
case 'lettersOnly': options.regex = '^[a-zA-Z]*$'; break;
case 'lowercaseLettersOnly': options.regex = '^[a-z]*$'; break;
case 'uppercaseLettersOnly': options.regex = '^[A-Z]*$'; break;
case 'lettersAndDigitsOnly': options.regex = '^[a-zA-Z0-9]*$'; break;
case 'validPhoneCharsOnly': options.regex = '^[0-9 ()/-]*$'; break;
default: options.regex = '';
var reg = new RegExp(options.regex);
if (reg.test(viewValue)) //if valid view value, return it
return viewValue;
else //if not valid view value, use the model value (or empty string if that's also invalid)
var overrideValue = (reg.test(ctrl.$modelValue) ? ctrl.$modelValue : '');
element.val(overrideValue);
return overrideValue;
);
;
);
【讨论】：
以上是关于如何在html中给出特定的输入类型？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 html 文件选择器（输入类型 =“文件”）将照片上传到 facebook（图形 api）