根据按钮单击填充下一个空文本输入

Question

我有一组简单的按钮，可以按任何顺序单击。 单击按钮时，应填充下一个可用的文本框。

到目前为止，我只能使按钮单击填充焦点所在的文本框。 这只真正完成了我的一半任务。

目前，如果可能的话，我只在寻找 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>

Answer 1

我有一组简单的按钮，可以按任何顺序单击。 单击 [,] 按钮应填充下一个可用的[空]文本框。

我会选择一种基于自定义组件的方法，因此实现代码尽可能通用一次。 对于相同（甚至相似）的任务，代码重用将非常容易，但使用不同的标记。 还可以在每个文档中使用/运行多个组件。

该方法是围绕使用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>

Answer 2

您可以在函数中添加一个参数来更新精确的文本框，如下所示：

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

根据按钮单击填充下一个空文本输入

问题描述

2 个解决方案

解决方案1
0 2022-06-07 17:47:32

解决方案2
-1 已采纳 2022-06-07 13:23:51

根据按钮单击填充下一个空文本输入

问题描述

2 个解决方案

解决方案1 0 2022-06-07 17:47:32

解决方案2 -1 已采纳 2022-06-07 13:23:51

解决方案1
0 2022-06-07 17:47:32

解决方案2
-1 已采纳 2022-06-07 13:23:51