我有一組簡單的按鈕，可以按任何順序單擊。單擊按鈕時，應填充下一個可用的文本框。
到目前為止，我只能使按鈕單擊填充焦點所在的文本框。這只真正完成了我的一半任務。
目前，如果可能的話，我只在尋找 vanilla JS 解決方案而不是 JQuery。
<body>
<div class="buttons">
<button class="btn" id="txt1" onclick="addText('txt1')">txt1</button>
<button class="btn" id="txt2" onclick="addText('txt2')">txt2</button>
<button class="btn" id="txt3" onclick="addText('txt3')">txt3</button>
<button class="btn" id="txt3" onclick="addText('txt3')">txt3</button>
<button class="btn" id="txt4" onclick="addText('txt4')">txt4</button>
<button class="btn" id="txt5" onclick="addText('txt5')">txt5</button>
</div>
<div class="textBoxes">
<input type="text" class="inputs" id="box1" placeholder="WPT 1" onfocus="field=this;" autofocus/>
<input type="text" class="inputs" id="box2" placeholder="WPT 2" onfocus="field=this;"/>
<input type="text" class="inputs" id="box3" placeholder="WPT 3" onfocus="field=this;"/>
<input type="text" class="inputs" id="box4" placeholder="WPT 4" onfocus="field=this;"/>
<input type="text" class="inputs" id="box5" placeholder="WPT 5" onfocus="field=this;"/>
</div>
<script>
var field = 0;
function addText(txt){
if(field === 0) return false;
field.value = txt;
}
</script>
</body>
uj5u.com熱心網友回復：
我有一組簡單的按鈕，可以按任何順序單擊。單擊 [,] 按鈕應填充下一個可用的[空]文本框。
我會選擇一種基于自定義組件的方法，因此實作代碼盡可能通用一次。對于相同（甚至相似）的任務，代碼重用將非常容易，但使用不同的標記。還可以在每個檔案中使用/運行多個組件。
該方法是圍繞使用data-*全域屬性、屬性選擇器和HTMLElement.dataset.
組件（源）根由其[data-prefill-values-for]屬性標識，其相關dataset.prefillValuesFor值包含此類組件的 ID。后者將用于通過 查詢組件的相關目標根`[data-prefill-targets-for="${ componentId }"]`。
組件的初始化是通過訂閱單個處理程式來完成的，該處理程式bind是組件的目標根到'click'根元素內的任何事件（請參閱... event-delegation）。
處理程式本身從其系結的目標根檢索第一個可用的空預填充目標，這是通過查詢[data-prefill-target]和過濾相關元素來完成的value。此外，但僅當存在空的預填充目標時，處理程式才會從其事件目標中檢索要設定的預填充值，該值通過讀取事件目標的dataset.prefillValue. 如果所有分配標準都得到滿足，分配最終會發生。
function handlePrefillForBoundTarget(evt) {
const targetRoot = this;
const emptyPrefillTarget = Array
.from(
targetRoot
.querySelectorAll('[data-prefill-target]')
)
.filter(elmNode =>
(elmNode.value?.trim?.() ?? elmNode.value) === ''
)[0];
if (emptyPrefillTarget) {
const prefillSource = evt
.target
.closest('[data-prefill-value]');
const { prefillValue } = prefillSource.dataset;
emptyPrefillTarget.value = prefillValue;
}
}
function initPrefillComponent(sourceRoot) {
const componentId = sourceRoot
.dataset
.prefillValuesFor ?? '';
const targetRoot = document
.querySelector(`[data-prefill-targets-for="${ componentId }"]`);
if (targetRoot) {
sourceRoot
.addEventListener(
'click',
handlePrefillForBoundTarget
.bind(targetRoot)
);
}
}
function main() {
document
.querySelectorAll('[data-prefill-values-for]')
.forEach(initPrefillComponent);
}
main();body { margin: 0; }
.textBoxes { margin: 8px 0 24px 0; }<div class="buttons" data-prefill-values-for="1">
<button data-prefill-value="foo bar">foo bar</button>
<button data-prefill-value="baz biz">baz biz</button>
<button data-prefill-value="the quick brown fox">the quick brown fox</button>
<button data-prefill-value="jumps over">jumps over</button>
<button data-prefill-value="the lazy dog">the lazy dog</button>
</div>
<div class="textBoxes" data-prefill-targets-for="1">
<input type="text" placeholder="WPT 1" data-prefill-target autofocus />
<input type="text" placeholder="WPT 2" data-prefill-target />
<input type="text" placeholder="WPT 3" data-prefill-target />
<input type="text" placeholder="WPT 4" data-prefill-target />
<input type="text" placeholder="WPT 5" data-prefill-target />
</div>
<div class="buttons" data-prefill-values-for="2">
<button data-prefill-value="Lorem ipsum">
Lorem ipsum
</button>
<button data-prefill-value="dolor sit amet">
dolor sit amet
</button>
<button data-prefill-value="consectetur adipiscing elit">
consectetur adipiscing elit
</button>
<button data-prefill-value="sed do eiusmod tempor incididunt">
sed do eiusmod tempor incididunt
</button>
<button data-prefill-value="ut labore et dolore magna aliqua">
ut labore et dolore magna aliqua
</button>
</div>
<div class="textBoxes" data-prefill-targets-for="2">
<input type="text" placeholder="WPT 11" data-prefill-target value="foo" autofocus />
<input type="text" placeholder="WPT 12" data-prefill-target value="bar" />
<input type="text" placeholder="WPT 13" data-prefill-target />
<input type="text" placeholder="WPT 14" data-prefill-target value="baz" />
<input type="text" placeholder="WPT 15" data-prefill-target />
</div>uj5u.com熱心網友回復：
您可以在函式中添加一個引數來更新精確的文本框，如下所示：
function addText(txt, fieldNumber) {
var elems = document.getElementsByClassName("inputs");
if (elems.length <= fieldNumber) return;
elems[fieldNumber].value = txt;
}
然后將其稱為“addText（'text'，3）”
檢查此沙箱 https://codesandbox.io/s/laughing-einstein-byhf0f?file=/src/index.js:299-472
如果通過“下一個可用”，您的意思是一個還沒有值的欄位，然后像這樣編輯您的函式：
function addText(txt) {
var elems = document.getElementsByClassName("inputs");
console.log("111");
console.log(elems);
for (let i = 0; i < elems.length; i ) {
if (elems[i] && !elems[i].value) {
elems[i].value = txt;
break;
}
}
}
對于演示檢查此沙箱：https ://codesandbox.io/s/trusting-browser-lckvy0?file=/index.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/487848.html