使用 querySelector 切换到下一个输入
Tabbing to next input using querySelector
我试图在达到最大长度后将输入字段切换到下一个字段,但我一直收到错误 Failed to execute 'querySelector' on 'Document': 'name=2' is not a valid selector.
。我阅读了 mozialla's explanation of a querySelector 并尝试使用元素 id
来 focus() on 但这会产生相同的错误。我想我不明白如何正确制作选择器以传递给 querySelector。
我的输入字段只显示 2 我有 3:
<Input
onChange={dateChange("month")}
value={date.month}
id="1"
maxLength={2}
type="number"
/>
<span className="sep">/</span>
<Input
onChange={dateChange("day")}
value={date.day}
name="2"
id="2"
maxLength={2}
type="number"
/>
我的 onChange:
const dateChange = (field) => (e) => {
const fieldIndex = e.target.name;
let fieldIntIndex = parseInt(fieldIndex, 10);
// format to fit
let value = e.target.value;
if (value.length === e.target.maxLength) {
if (fieldIntIndex < 3) {
const nextfield = document.querySelector(
`name=${fieldIntIndex + 1}`
);
console.log(nextfield);
if (nextfield !== null) {
nextfield.focus();
}
}
}
const d = { ...date, [field]: value };
setDate(d);
debounceCallback(handleDateInputChange, d);
};
我还在学习,所以如果有任何建议都很好 :) 在此先感谢!
名称是一个字符串所以我认为你应该这样做(添加括号)
name='${fieldIntIndex + 1}'
首先,我认为这样设置事件监听器是不正确的:
onChange={dateChange("month")}
如果您这样做,您实际上会在页面呈现期间执行该功能。该函数应在事件发生时执行。正确的做法是:
onChange={dateChange}
如果您还想向函数添加参数,那么您应该这样做:
onChange={dateChange.bind(this, "month")}
此外,关于查询选择器,我认为正确的语法是:
const nextfield = document.querySelector(`input[name='${fieldIntIndex + 1}']`);
您的 name 属性设置为输入元素,因此我们使用 input[name]。
name 也有一个字符串值,所以我们使用 input[name=''].
最后我们想参数化地设置名称值,所以我们使用 `input[name='${parameter}']`.
您可以找到绑定 JavaScript 函数 here and the documentation of querySelector here 的 MDN 文档。
编辑:在输入之间导航的另一种选择是 tabindex 属性。您可以找到更多相关信息 here.
我试图在达到最大长度后将输入字段切换到下一个字段,但我一直收到错误 Failed to execute 'querySelector' on 'Document': 'name=2' is not a valid selector.
。我阅读了 mozialla's explanation of a querySelector 并尝试使用元素 id
来 focus() on 但这会产生相同的错误。我想我不明白如何正确制作选择器以传递给 querySelector。
我的输入字段只显示 2 我有 3:
<Input
onChange={dateChange("month")}
value={date.month}
id="1"
maxLength={2}
type="number"
/>
<span className="sep">/</span>
<Input
onChange={dateChange("day")}
value={date.day}
name="2"
id="2"
maxLength={2}
type="number"
/>
我的 onChange:
const dateChange = (field) => (e) => {
const fieldIndex = e.target.name;
let fieldIntIndex = parseInt(fieldIndex, 10);
// format to fit
let value = e.target.value;
if (value.length === e.target.maxLength) {
if (fieldIntIndex < 3) {
const nextfield = document.querySelector(
`name=${fieldIntIndex + 1}`
);
console.log(nextfield);
if (nextfield !== null) {
nextfield.focus();
}
}
}
const d = { ...date, [field]: value };
setDate(d);
debounceCallback(handleDateInputChange, d);
};
我还在学习,所以如果有任何建议都很好 :) 在此先感谢!
名称是一个字符串所以我认为你应该这样做(添加括号)
name='${fieldIntIndex + 1}'
首先,我认为这样设置事件监听器是不正确的:
onChange={dateChange("month")}
如果您这样做,您实际上会在页面呈现期间执行该功能。该函数应在事件发生时执行。正确的做法是:
onChange={dateChange}
如果您还想向函数添加参数,那么您应该这样做:
onChange={dateChange.bind(this, "month")}
此外,关于查询选择器,我认为正确的语法是:
const nextfield = document.querySelector(`input[name='${fieldIntIndex + 1}']`);
您的 name 属性设置为输入元素,因此我们使用 input[name]。
name 也有一个字符串值,所以我们使用 input[name=''].
最后我们想参数化地设置名称值,所以我们使用 `input[name='${parameter}']`.
您可以找到绑定 JavaScript 函数 here and the documentation of querySelector here 的 MDN 文档。
编辑:在输入之间导航的另一种选择是 tabindex 属性。您可以找到更多相关信息 here.