Question

<div class="input-group">
    <input type="password" maxlength="1" value="1" readonly="">
    <input type="password" maxlength="1" value="2" readonly="">
    <input type="password" maxlength="1" value="3" readonly="">
    <input type="password" maxlength="1" value="" readonly="">
</div>

我正在尝试获取最后输入的内容：

document.querySelector('.input-pin input[value!=""]:last-child')

... last-child输入值not empty，但是它的选择器无效。

Answer 1

如果您希望将选择基于属性值，那么您可以使用:not()伪类来否定带有空值的input元素。

在这种情况下，选择器将是：

input[value]:not([value=""])

从那里，您可以选择所有匹配的元素并检索最后一个：

var inputs = document.querySelectorAll('input[value]:not([value=""])');
var lastInputWithValue = inputs[inputs.length - 1];

...或：

var inputs = document.querySelectorAll('input[value]:not([value=""])');
var lastInputWithValue = Array.from(inputs).pop();

如果值可以更改并且您想要根据当前属性值（而不是属性值）进行检查，那么您需要过滤元素：

var inputs = document.querySelectorAll('input');
var lastInputWithValue = Array.from(inputs).filter(i => i.value).pop();

作为旁注，:last-child伪类仅根据其顺序返回父元素内的最后一个子元素。它不会过滤所选元素，而是按照您的期望选择最后一个元素的属性或类。此外，[value!=""]不是您指出的有效属性选择器。但是，您可以像我上面指出的那样使用input[value]:not([value=""])。

Answer 2

您可以执行document.querySelector('.input-group input:last-child');

查找上次输入的输入

2 个答案: