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

rjjhvcjd  于 2022-11-22  发布在  jQuery
关注(0)|答案(7)|浏览(262)

我 添加 了 下面 的 代码 , 当 用户 点击 输入 框 时 , 选择 整个 文本 :

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

中 的 每 一 个
但 我 收到 下面 的 错误 :
未 捕获 的 无效 状态 错误 :无法 在 " HTMLInputElement " 上 执行 " setSelectionRange " :输入 元素 的 类型 ('number ' ) 不 支持 选择 。

q8l4jmvw

q8l4jmvw1#

我知道这是一个老问题,但我确实找到了一个不使用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';
}
tzcvj98z

tzcvj98z2#

请改用input type="tel"
例如:

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

这样就可以避免错误消息。
在移动的上,它会显示所需的数字键盘。

j7dteeu8

j7dteeu83#

作为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);
lsmepo6l

lsmepo6l4#

输入 type="number" 不 支持 setSelectionRange
您 可以 使用 :type="text"inputmode="numeric" , 这 将 为 移动 用户 显示 数字 键盘 并 支持 setSelectionRange

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

中 的 每 一 个

p4rjhz4m

p4rjhz4m5#

正如错误消息所示,您不能使用setSelectionRange输入数字。如果您想使用JavaScript修改选择,则必须使用<input type="text"/>

euoag5mw

euoag5mw6#

evt.target.select()在Chrome中选择input type="number"的内容,“if”结构在触控设备上也是如此。

document.querySelector('.number_input').addEventListener('focus', function (evt) {
    evt.target.select();
    if ('ontouchstart' in window) {
      setTimeout(function() {
        evt.target.setSelectionRange(0, 9999);
      }, 1);
    }
}, true);

不幸的是,“如果”阻止了Mac Safari中的自动选择,我不知道如何在桌面浏览器和移动的中获得相同的结果。

8fsztsew

8fsztsew7#

我在angular 1.5中使用了一个漂亮的自定义指令(参见下面的typescript中的示例)。
由于在输入type=“number”时似乎无法通过编程方式选择整个值,因此此处的策略是在编辑值时暂时将输入类型从数字更改为文本,然后在模糊时将其更改回原始类型。
这会导致与原生行为略有不同的行为,它实际上允许您在字段中输入“无效”数据。然而,在blur上,浏览器的所有原生数字验证逻辑都会启动,并阻止任何无效数据被提交。我相信还有一些其他的陷阱,但它在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;
    }
}

相关问题