时间戳

首页 > 解决方案 > 单击datalist中的选项值时如何更改占位符文本

javascript - 单击datalist中的选项值时如何更改占位符文本

问题描述

当我尝试通过单击数据列表中的选项来更改值时，占位符中的值没有改变。当我选择“Farmer”时，得到“Farmer”，但我需要“Search Farmer Here...”等等。

<input type="text1" list="browsers" name="browser" id="browser" placeholder="Search Here..">
<datalist id="browsers" style="font-size:20pt;">
  <option value="Farmer">
  <option value="Input products">
  <option value="Output products">
  <option value="Customers">
  <option value="Suppliers">
  <option value="Sales Invoices">
  <option value="Purchase Bills">
  <option value="Payments">
  <option value="collections">
</datalist>

我尝试通过如下方式传递 id

$("#yourtextboxid").attr("placeholder", "variable");

我也试过

document.getElementsByName('Email')[0].placeholder='new text for email';

但仍然没有得到所需的结果。我错过了任何语法吗？

标签： javascripthtmljquery

解决方案

将事件侦听器添加到调用函数以替换值和占位符文本的输入。

const input = document.querySelector('#browser');
input.addEventListener('change', handleInput, false);

function handleInput(e) {
  const { value, placeholder } = e.target;
  e.target.placeholder = `Search ${value} here`;
  e.target.value = '';
}
<input type="text" list="browsers" name="browser" id="browser" placeholder="Search Here..">
<datalist id="browsers">
  <option value="Farmer">
  <option value="Input products">
  <option value="Output products">
  <option value="Customers">
  <option value="Suppliers">
  <option value="Sales Invoices">
  <option value="Purchase Bills">
  <option value="Payments">
  <option value="collections">
</datalist>

推荐阅读