当前位置： 文江博客 话题详情

基于按钮单击的下一个空文本输入填充下一个空文本输入

发布于 2025-02-05 07:49:55 字数 1437 浏览 3 评论 0 原文

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

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

目前，我只是在寻找香草JS解决方案，而不是如果可能的话。

<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>
原文

I have a simple set of buttons that may be clicked in any order. When clicked the button should fill the next available text box.

So far I have only been able to make the button click populate the text box that is in focus. This only really fulfils half of my task.

At the moment I am only looking for vanilla JS solutions rather than JQuery if possible.

<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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

寄意 2025-02-12 07:49:56

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

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

该方法是围绕全局属性， /a> and 。

组件（源）root通过其 [数据prefill-values-for]识别属性，其中其相关 dataset.prefillvaluesfor value value持有组件的ID。后者将通过`[data-prefill-targets-for =“ $ {componentId}”]`来查询组件相关的目标根。

组件的初始化是通过订阅 bint 的单个处理程序完成的组件目标root到任何'code>'code>'单击'事件（请参阅... ）（请参阅... < a href =“ https://davidwalsh.name/event-delegate” rel =“ nofollow noreferrer”> event-delegation ）。

处理程序本身从其边界的目标root检索第一个可用的空的预填充目标，该目标是通过查询 [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>

I have a simple set of buttons that may be clicked in any order. When clicked[,] the button should fill the next available [empty] text box.

I would choose kind of a custom component based approach, thus one implements code as generic as possible just once. Code-reuse will be possible pretty easy for same (even similar) tasks but with e.g. a different markup. One also can use/run more than just one component at each document.

The approach is build around the usage of data-* global attributes, attribute selectors and HTMLElement.dataset.

A component (source) root gets identified by its [data-prefill-values-for] attribute where its related dataset.prefillValuesFor value holds such a component's ID. The latter will be used for querying the component's related target root via `[data-prefill-targets-for="${ componentId }"]`.

The initialization of a component is done by subscribing a single handler which binds the component's target root to any 'click' event from within the root element (see ... event-delegation).

The handler itself retrieves from its bound target root the first available empty prefill-target which is done by querying for [data-prefill-target] and filtering the related elements each by its empty value. In addition, but only if an empty prefill-target exists, the handler retrieves from its event-target the to be set prefill-value which gets achieved by reading the event-target's dataset.prefillValue. In case all assignment criteria was fulfilled the assignment finally takes place.

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>

回复 原文
笑咖 2025-02-12 07:49:56

您可以在功能中添加paramater以更新这样的精确文本框：

function addText(txt, fieldNumber) {
  var elems = document.getElementsByClassName("inputs");
  if (elems.length <= fieldNumber) return;
  elems[fieldNumber].value = txt;
}

然后称其为“ addtext（'text'，3）

”

如果通过“下一个可用”，您的意思是一个没有值的字段，然后编辑您的功能

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;
    }
  }
}

：演示检查此沙盒：

You can add a paramater to your function to update exact text box like this:

function addText(txt, fieldNumber) {
  var elems = document.getElementsByClassName("inputs");
  if (elems.length <= fieldNumber) return;
  elems[fieldNumber].value = txt;
}

and then call it like "addText('text', 3)"

Check this sandbox
https://codesandbox.io/s/laughing-einstein-byhf0f?file=/src/index.js:299-472

If by "next available", you meant a field which doesn't already have a value then edit your function like this:

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;
    }
  }
}

For a demo check this sandbox: https://codesandbox.io/s/trusting-browser-lckvy0?file=/index.html

回复 原文
~没有更多了~

关于作者

北城孤痞

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

浪子阿飞

文章 0 评论 0

JK.Yang

文章 0 评论 0

人间不值得

文章 0 评论 0

静待花开

文章 0 评论 0

只涨不跌

文章 0 评论 0

污浊的双黑

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文