当用户点击输入框时,我添加了以下代码来选择全文:
<input type="number" onclick="this.setSelectionRange(0, this.value.length)" name="quantity" />
但我收到以下错误:
Uncaught InvalidStateError:无法在'HTMLInputElement'上执行'setSelectionRange':输入元素的类型('number')不支持选择。
答案 0 :(得分:7)
改为使用input type="tel"
。
例如:
<input type="tel" onclick="this.setSelectionRange(0, this.value.length)" name="quantity" />
这可以解决问题,并避免出现错误消息。
在手机上,它会显示所需的数字键盘。
答案 1 :(得分:2)
evt.target.select()
选择Chrome中input type="number"
的内容,&#34; if&#34;结构在触摸设备上也是如此。
document.querySelector('.number_input').addEventListener('focus', function (evt) {
evt.target.select();
if ('ontouchstart' in window) {
setTimeout(function() {
evt.target.setSelectionRange(0, 9999);
}, 1);
}
}, true);
不幸的是,&#34; if&#34;在Mac Safari中阻止自动选择,我不知道如何在桌面浏览器和移动设备上获得相同的结果。
答案 2 :(得分:1)
我使用一个漂亮的自定义指令(请参阅下面的typescript中的示例)在角度1.5中使用它。
由于在输入类型=&#34; number&#34;时出现无法以编程方式选择整个值,此处的策略是在编辑值时临时将输入类型从数字更改为文本,然后在模糊时将其更改回原始类型。
这导致行为与本机行为略有不同,因为它实际上允许您输入&#34;无效&#34;数据进入该领域。但是,在模糊时,所有浏览器的本机号码验证逻辑都会启动并阻止提交任何无效数据。我确定还有一些其他问题,但它在Chrome和FireFox中的效果非常好,所以我想我会分享。
/// Selects the entire input value on mouse click.
/// Works with number and email input types.
export class SelectOnClick implements ng.IDirective {
require = 'ngModel';
restrict = 'A';
private ogType: any
constructor(private $window: ng.IWindowService) { }
link = (scope: ng.IScope, element: any) => {
element.on('click', () => {
if (!this.$window.getSelection().toString()) {
this.ogType = element[0].type;
element[0].type = 'text';
element[0].setSelectionRange(0, element[0].value.length);
}
})
element.on('blur', () => {
element[0].type = this.ogType;
})
}
static factory(): ng.IDirectiveFactory {
var directive = ($window: ng.IWindowService) => new SelectOnClick($window);
directive['$inject'] = ['$window'];
return directive;
}
}
答案 3 :(得分:1)
我知道这是一个老问题,但是我确实找到了一个不错的解决方法,而没有使用tel
输入类型。通过在选择之前将输入类型从number
更改为text
,错误消失了,您可以保留number
输入类型的所有优点。
tel
允许输入文本,这可能不适用于数字。tel
在输入旁边不显示数字“ spinner”(仅在您需要时)。function onInputFocus(event) {
const target = event.currentTarget;
target.type = 'text';
target.setSelectionRange(0, target.value.length);
target.type = 'number';
}
答案 4 :(得分:0)
正如错误消息所示,您无法使用setSelectionRange
输入数字。如果您想使用JavaScript修改选择,则必须使用<input type="text"/>
代替。
答案 5 :(得分:0)
作为Tri Q Tran's answer的变体,使其更通用。这可能是更好的方法:
const element = document.createElement('input');
element.type = 'number';
(function(originalFn){
element.setSelectionRange = function() {
this.type = 'text';
originalFn.apply(this, arguments);
this.type = 'number';
}
})(element.setSelectionRange);
或者,如果您不介意污染原型,这是一个更通用的解决方案:
(function(originalFn){
HTMLInputElement.prototype.setSelectionRange = function() {
if ( this.type === 'number' ) {
this.type = 'text';
originalFn.apply(this, arguments);
this.type = 'number';
} else {
originalFn.apply(this, arguments);
}
}
})(HTMLInputElement.prototype.setSelectionRange);
答案 6 :(得分:0)
输入 type="number"
不支持 setSelectionRange
您可以使用:type="text"
和 inputmode="numeric"
,这将为移动用户显示数字键盘并支持 setSelectionRange
<input
type="text"
inputmode="numeric"
onclick="this.setSelectionRange(0, this.value.length)"
name="quantity" />