根據按鈕單擊填充下一個空文本輸入
[英]Populate next empty text input based on a button click
問題描述
我有一組簡單的按鈕，可以按任何順序單擊。 單擊按鈕時，應填充下一個可用的文本框。
到目前為止，我只能使按鈕單擊填充焦點所在的文本框。 這只真正完成了我的一半任務。
目前，如果可能的話，我只在尋找 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>
2 個解決方案
解決方案1
0 2022-06-07 17:47:32
我有一組簡單的按鈕，可以按任何順序單擊。 單擊 [,] 按鈕應填充下一個可用的[空]文本框。
我會選擇一種基於自定義組件的方法，因此實現代碼盡可能通用一次。 對於相同（甚至相似）的任務，代碼重用將非常容易，但使用不同的標記。 還可以在每個文檔中使用/運行多個組件。
該方法是圍繞使用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>
解決方案2
-1 已采納 2022-06-07 13:23:51
您可以在函數中添加一個參數來更新精確的文本框，如下所示：
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
根據外部javascript文件中的單選按鈕單擊更改輸入文本
[英]Change input text based on radio button click in external javascript file
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.