无法在'HTMLInputElement'上执行'setSelectionRange':输入元素的类型('number')不支持选择

时间:2015-10-29 04:51:38

标签: javascript jquery html css

当用户点击输入框时,我添加了以下代码来选择全文:

<input type="number" onclick="this.setSelectionRange(0, this.value.length)" name="quantity" />

但我收到以下错误:

  

Uncaught InvalidStateError:无法在'HTMLInputElement'上执行'setSelectionRange':输入元素的类型('number')不支持选择。

7 个答案:

答案 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" />