单击数据列表中的选项值后如何更改占位符文本 [英] How to change the placeholder text upon clicking the option value in datalist

问题描述

当我尝试在单击数据列表中的选项时更改值时，占位符中的值没有更改.当我选择农民"时正在获取Farmer"，但我需要获取Search Farmer Here..."；等等.

When I tried to change the value upon clicking the option in the datalist the values are not changing in the placeholder. When I choose "Farmer" am getting "Farmer", but I need to get "Search Farmer Here..." and so on.

<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

I tried by passing id like below

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

我也试过

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

但仍然没有得到所需的结果.我是否遗漏了任何语法?

but still am not getting required results. Did I missed any syntax?

推荐答案

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

Add an event listener to the input that calls a function to replace both the value, and the placeholder text.

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>

这篇关于单击数据列表中的选项值后如何更改占位符文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！