使用javascript模拟单击不适用于使用datalist的输入
使用JavaScript模拟单击不适用于使用datalist的输入是指在使用HTML5的datalist元素时，无法通过JavaScript模拟用户的点击事件来选择datalist中的选项。
datalist元素是HTML5中的一个新元素，用于提供输入框的自动完成功能。它通过在输入框中输入字符时，显示一个下拉列表，列出与输入字符匹配的选项。用户可以通过点击下拉列表中的选项来选择输入框的值。
然而，由于datalist元素的实现机制，它并不支持通过JavaScript模拟用户的点击事件来选择选项。这是因为datalist元素并不是一个真正的下拉列表，而是一个浏览器提供的UI控件，其行为和样式是由浏览器自己决定的，无法通过JavaScript来控制。
如果需要通过JavaScript来模拟用户的点击事件来选择datalist中的选项，可以考虑使用其他的解决方案，例如自定义下拉列表组件或使用其他的自动完成插件。这些解决方案可以通过JavaScript来控制下拉列表的显示和隐藏，并且可以通过JavaScript来模拟用户的点击事件来选择选项。
总结起来，使用JavaScript模拟单击不适用于使用datalist的输入，因为datalist元素并不支持通过JavaScript来控制和模拟用户的点击事件。如果需要实现类似的功能，可以考虑使用其他的解决方案来替代datalist元素。
相关·内容
1回答
<body ng-app>
<datalist id="dataList">
<select id="select">
<option ng-repeat="val in temp" ng-hide="true" >{{val}}</option>
</select>
</datalist>
<input list="dataList" ng-
浏览 0提问于2016-04-13得票数 5
回答已采纳
1回答
打开输入元素的列表
、、、
我有一个带有"list“属性的输入元素。
HTML代码：
<input id="options" list="option" onclick="myExpand();" />
<datalist id="option">
<option value="Option A" />
<option value="Option B" />
</datalist>
只有单击右侧箭头时，列表才会打开。是否有方法在"onclick
浏览 1提问于2017-02-28得票数 2
回答已采纳
我试图在单击按钮时自动向用户显示datalist元素的所有选项，从而使html5元素成为焦点。通常，当用户单击相关的文本输入元素两次时，所有选项都会显示出来。我想以编程方式模拟此行为，以便用户可以在开始键入之前看到所有选项。
我尝试过通过使用$('#text-input').focus();获得焦点，然后使用jquery .click() (一次和两次)，.dblclick()，.trigger('click')，甚至使用jquery.simulate.js来模拟点击和双击。所有这些都会触发$('#text-input').click(funct
浏览 6提问于2013-07-11得票数 6
我有一个HTML5输入(type=“文本”)绑定到一个数据列表，它是在输入3个字符后填充的。加载页面时，Datalist最初为空。我使用来自Jquery的AJAX调用来根据搜索条件更新datalist。如果我在文本输入中输入"tes“，刷新的datalist不会显示，除非我在Chrome和IE中点击文本输入。在文本输入元素中单击后，list将显示。如果找到匹配的条目，更新列表在Firefox中显示良好。
我尝试使用javascript中的焦点和单击事件，因此列表显示为文本更改，但什么都不起作用。任何帮助都将不胜感激。
html (gsp格式)
<input type="t
浏览 1提问于2013-12-31得票数 1
如何使用vanilla javascript模拟“右箭头”键对输入的按键？
我有一个输入和一个按钮。我想让按钮触发输入上“右箭头”键的按键。
<input id="myInput" type="text">
<button id="myButton>Click Me</button>
基本上，最终结果应该是：
单击按钮光标向右移动一个位置(因为我们触发了按键操作)
我已经尝试了这些解决方案，但它们不起作用：
浏览 66提问于2018-08-17得票数 1
我正在对一个客户的网站进行升级，我发现了以下挑战：
该客户有一个由两个日期输入标记组成的预订系统，用于确定他/她进入酒店房间的日期。我知道有一些jQuery甚至是纯javascript驱动的插件(如DHTMLX套件甚至jQuery EasyUI控件)在这方面做得很好，但我想知道是否可以将日期阻塞功能添加到一个普通的<input type="date">标记中。
到目前为止，我已经使用<datalist>标记添加了预定义的日期，并将其与带有list属性的日期输入一起使用，但仅此而已。
有没有可能用javascript阻止日期？
浏览 1提问于2014-03-06得票数 1
6回答
我正在动态地将选项加载到HTML5 datalist元素中。但是，浏览器试图在加载选项之前显示datalist。这会导致列表没有显示，有时还会显示部分列表。一旦选项加载，是否有任何方法通过JavaScript刷新列表？
<input type="text" id="ingredient" list="ingredients">
<datalist id="ingredients"></datalist>
JavaScript
$("#ingredient").on("k
浏览 8提问于2014-10-28得票数 17
4回答
我正在考虑一种替代JavaScript的方法，以防用户手动禁用它，这样，我就可以在某种程度上模拟单击事件并改变它，例如，通过创建我自己的:单击伪类来模拟单击事件，而不是提示他们启用它。
这种情况有可能发生吗？是否有可能创建自己的css伪类呢？
浏览 8提问于2016-05-29得票数 7
回答已采纳
我有一个带有相关数据列表的html5输入，我想在打开选项时清除该输入，以便所有选项都可见(未过滤)。我如何在Javascript中做到这一点？(使用或不使用jQuery )
例如()
<input type="text" name="city" list="cityname">
<datalist id="cityname">
<option value="Boston">
<option value="Cambridge">
</dat
浏览 25提问于2016-09-03得票数 1
回答已采纳
我有一个在DataList中以asp.net显示的产品列表。我在DataList中有一个包含Price的产品的Price。此Textbox用于修改产品的Price。我只想在用户输入的Price是LESS THAN时才向用户显示消息，该Minimum价格设置为使用JQuery/Javascript的产品。
一切正常。就在我使用TextBox名称验证Class时，它只适用于DataList中的第一个TextBox，而不适用于剩余的TextBox(当我在TextBox中输入金额10 (考虑最低价格为50)时，它必须转到脚本的'if‘部分。但是，它会转到DataList (脚本中的其他部分)。
浏览 0提问于2014-02-26得票数 0
回答已采纳
2回答
我在页面上有一个文本框，现在只要在页面中输入任何年龄值，该页面就应该加载到我的datalist中，我已经创建了其余的内容，但是我不知道如何从asp.net中触发textbox onkeydown事件，我知道如何从javascript中使用它，但问题是，在这个函数中，我做了下面的事情：
将当前页值应用于文本框中的静态变量，它绑定datalist，从而禁用下一个按钮
我不认为我可以从javascript，任何人都有任何解决办法，这是如何实现从服务器端，onkeydown事件。
浏览 2提问于2012-02-15得票数 3
回答已采纳
有些数据论者没有被正确地看待。在datalist.Where中只建议输入的初始值，这是我的错吗？
我用php和来自亚马逊，谷歌和法国BnF (国家图书馆)的数据生成一些数据记录者，以便用户可以选择他适当的信息。它在大多数情况下都有效(95%)。但我对一些日期论者有意见。仅可查看一个选项，即输入的初始值。
代码1：
<input id="author" name="item_author" value="Sophie de Ségur" onchange="javascript:submit();" lis
浏览 5提问于2019-01-03得票数 0
我正在使用html数据列表为文本输入创建自动完成选项。我想知道是否可以在单击按钮时触发从javascript中出现的建议，而不是双击输入。
<datalist id='gradeSuggestions'>
<option value='A'>A</option>
<option value='B'>B</option>
<option value='C'>C</option>
</datalist>
<i
浏览 6提问于2013-09-24得票数 7
回答已采纳
1回答
我想知道是否有任何人可能知道的允许HTML 元素与contenteditable元素和(而不是元素)一起工作的可黑客方式。
示例代码：
<label>Choose a browser from this list:
<span contenteditable list="browsers" name="myBrowser">choose</span>
</label>
<datalist id="browsers">
<option value="Chrome&#
浏览 1提问于2017-01-14得票数 9
4回答
<label> Enter your favorite movies:<br/>
<input type="text" name="movies" list="movies"/>
<datalist id="movies">
<label> or select one from the list:
<select name="movies">
<option value="Star Wars">
浏览 6提问于2016-06-29得票数 6
回答已采纳
2回答
我一直在研究这个问题，但我似乎找不到符合标准的搜索词。
我想要一个datalist文本输入(最好仍然保持自动完成)，但是当用户单击列表中的某个项时，我希望将它添加到输入中，而不是替换输入的全部内容。
例如，我有一个建筑位置列表，包括“后门”、“前门”、“一楼”、“二楼”等。用户应该可以从列表中单击“一楼”，然后点击“一楼”，从而输入“一楼前门”。我可以想出几种方法来实现这一点，但我不知道如何为数据工作者公开javascript (如果可能的话)。
编辑:香草数据表：
<input list="data-list" placeholder="Double Click
浏览 0提问于2018-07-27得票数 0
回答已采纳
我不知道这种行为是否正常..。
<input list="options" onchange="console.log(this.value)" value="datalist"/>
<datalist id="options">
<option value="1" >Foo</option>
<option value="2">Bar</option>
<option value="3"&
浏览 4提问于2021-09-12得票数 2
1回答
我有一个与datalist相关联的输入，我想使用一个按钮来写入输入，但我不能重现打开该列表的事件。数据列表已被过滤，但我必须单击输入才能打开列表...click()和focus()不能工作，有什么好主意吗？
看看这段代码，当我点击按钮'A‘时，datalist没有打开。
function myFunction() {
document.getElementById('ice-cream-flavors').click();
document.getElementById('ice-cream-choice').value += 'A&
浏览 3提问于2020-02-06得票数 0
使用javascript查找datalist中的控件
假设在Datalist 2中存在像label1、label2和linkbutton这样的控件，当使用javascript单击linkbutton时，我想访问label1的值如何使用javascript在datalist中查找单击数据列表内部的按钮时的控件
浏览 2提问于2013-10-30得票数 0
(function addCastVoteListeners() {
const els = Array.prototype.slice.call(document.querySelectorAll('.castVote'));
els.forEach(addCastVoteListener);
})();
function addCastVoteListener(el) {
el.addEventListener('change', castVote);
}
function castVote() {
console.log(this.id);
浏览 23提问于2020-06-03得票数 0
1回答
我有一个AngularJs1.x应用程序，我在其中添加了一个html5 datalist元素。我知道Safari不支持这一点。现在，这不是一个大问题，我可以始终创建或添加一个多填充以后。
然而，有些行为我似乎搞不懂。datalist位于窗体上，并且它在该字段中始终具有无效状态。
<input type="text" name="description" maxlength="40" ng-minlength="5" ng-maxlength="40" class="form-control"
浏览 3提问于2016-06-29得票数 1
回答已采纳
我有一个页面，需要使用纯javascript过滤所有类型的数据(充当JSON变量)。所有操作都很好，直到我尝试实现一个datalist，其中该列表的内容根据用户输入实时更新。
var data = [{name:"Paul"},{name:"Alex"},{name:"Laura"}] // This is just example object
function updateSearch() {
let search = document.getElementById('search').value;
let o
浏览 2提问于2019-12-08得票数 1
回答已采纳
2回答
生成datalist次数
、、、
我在page和DataList上有一个文本框。
现在，当用户在文本框中输入任意整数并单击按钮时，将多次生成相同的数据列表。
例如，如果用户输入5，那么datalist将生成5次。datalist包含相同的数据。
我不知道该怎么做？请帮我解决这个问题。
<asp:TextBox ID="txtNumber" runat="server"> -> 3
然后它将Datalist生成为：
<asp:DataList ID="dl" runat="server"></asp:DataList>
&l
浏览 0提问于2014-02-11得票数 2
我有一个带有datalist选项的输入字段，它通过AJAX更新了其他字段之后的建议。
我试图在datalist中添加新的选项，其他问题如下：
$("#add_option").change(function(){
var _opt_opt_name_val = $(this).val();
var opt_name_url=_url+"?opt_name="+escape(_opt_opt_name_val);
var _values_datalist_id = $("#opt_values").attr("list
浏览 1提问于2021-06-21得票数 0
我在javascript中动态创建输入文本框。例如，一开始只有一个文本框。当用户单击+按钮时，会添加一个新的文本框。现在，我想将一个datalist附加到下一个文本框。我还将根据其他一些用户选择动态地生成数据列表。我看到的关于datalist用法的所有示例如下所示
但是我想这样做: newTextBox = document.createElement("input")；newList = document.createElement("datalist")；newTextBox.list= newList；newList.options = "choi
浏览 3提问于2014-08-15得票数 0
1回答
我有一个带有2个输入的表单，当用户从description中选择一个datalist时，第二个输入将填充product。它工作得很好，->
现在，我想在表单中动态添加输入。输入插入得很好，但上面的函数不适用于新的输入。
这是最后一个
<div class="container">
<div class="row">
<div class="col-lg-12 col-xs-12">
<form id="bookForm" acti
浏览 1提问于2015-12-07得票数 0
回答已采纳
我想要实现的是从结果中隐藏价值。 <input list="search-results" value="userText" id="geocoder" autocomplete="off">
<datalist id="search-results">
<option value="userText">Address 1</option>
<option value="userText">Address
浏览 238提问于2020-11-29得票数 0
2回答
我有一个带有数据表的文本输入。此datalist中填充了php：
<input type="text" name="city" list="cities" id="city">
<datalist id="cities">
<?php
foreach($cities as $city){
echo '<option value="'.$city.'" />';
浏览 2提问于2016-08-05得票数 2
回答已采纳
我正在尝试处理datalist的itemcommand事件。我想使用datalist中绑定的按钮。但是，当我在itemcommand事件上添加一个断点时，事件并没有告诉我为什么它不能在这里工作，这是datalist源代码和我的代码
<asp:DataList ID="DataList1" runat="server" RepeatDirection="Horizontal"
onitemcommand="DataList1_ItemCommand1" >
<ItemTem
浏览 3提问于2013-08-12得票数 1
回答已采纳
$("#football_players").bind('input', function (ev) {
alert("I want to know what is event launcher");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<datalist id="datalist_football_p
浏览 11提问于2015-10-01得票数 2
回答已采纳
我已经像下面的代码一样填充了输入列表的列表。然后，当我尝试单击输入字段并使用列表打开下拉列表时，列表会在一秒钟内打开和关闭。我不确定这是CSS还是Javascript的问题。 <!DOCTYPE html>
<html>
<head>
<script>
function getES(){
var a = new Array(15).fill("0");
var options;
for(var i = 0; i < a
浏览 8提问于2019-05-15得票数 0
1回答
我正在使用wso2esb 4.9.0和Wso2dss3.0.0
我有一个来自DSS服务的SOAP响应，如下所示
<soapenv:Header/>
<soapenv:Body>
<DataCollection xmlns="http://ws.wso2.org/dataservice">
<Datalist>
<partybranchid>2127629166052452</partybranchid>
<party
浏览 5提问于2015-09-11得票数 0
回答已采纳
我是Javascript和HTML的新手，尽管我在HTML中定义了元素，但我还是得到了这个异常。有人能帮忙吗？我试图根据用户输入的形状类型、坐标、宽度、颜色等绘制形状(最初是一个圆圈)，这是我在HTML中使用datalist所做的工作。但是无法获得javascript函数"rendershape“中选择的datalist形状的值。
下面是我的代码：
<!DOCTYPE html>
<html>
<title>Orchid School</title>
<body>
<form id="myForm" n
浏览 5提问于2016-04-08得票数 0
回答已采纳
我有一个html输入数据列表，需要将选择的值传递到javascript / angular中。它需要被传递，因为datalist要进入html表中，所以会有很多这样的数据。我见过的所有示例都是在javascript中获取它，而不是将它传递到方法中。
我尝试了on-select，但它什么也不起作用。我也在使用angular 1
<datalist id="dataList">
<option ng-repeat="note in linknotes" value="{{note}}">{{note}}</option
浏览 11提问于2017-12-09得票数 0
我开发了一个Windows Phone 8应用程序。但当我尝试将其添加到商店时，“将应用程序关联到商店”的选项没有显示(无法发布图片，因为我是新来的)。
当我右键单击项目时，选项不会出现，当我单击Visual Studio 2012菜单项目>商店>(关联应用程序的选项显示为禁用)时，该选项也不起作用。
此外，我还尝试在WMAppManifest.xml文件中手动添加标记，但也没有效果。在这种情况下，应用程序不会在模拟器中启动。它会一直加载下去。
我的开发者账户的当前状态是“需要验证”-意思是:我需要等待信用卡交易在我的银行弹出输入密码。真的是这样吗？这就是为什么我不能关联应用程序，
浏览 1提问于2013-01-29得票数 1
回答已采纳
我有一个这样的表单：
<input list='data-list' id='list'>
<datalist id='data-list'>
<option>first</option>
<option>second</option>
</datalist>
用户可以从datalist中选择一项，也可以键入自己的值。我通过对PHP脚本的JSON调用连接到数据库，以在表单的其余部分填充其他信息。我希望当用户在列表输入中输入姓名时(因此当内容模糊时)或当用户
浏览 0提问于2017-07-26得票数 4
我正在尝试提交一个表单，该表单在用户单击按钮时被隐藏。表单不需要任何用户信息，他们只需单击提交按钮即可转到另一个页面。
我对下面的按钮进行了编码
<li class="get-started menu-item-6703">
<a href="#!">Donate</a>
</li>
下面是模拟单击隐藏的submit按钮的脚本。不管是什么原因，这在移动设备上是行不通的(iOS可能也是)。
<script type="text/javascript">
$(document).re
浏览 3提问于2017-10-05得票数 2
1回答
我已经创建了一个数据表，它是动态填充的，并且工作正常。
现在，我需要侦听选项上的单击事件，以检索数据id值，并将其作为值放在隐藏的输入中。
我已经尝试过使用v-on:click.native和@click，但是控制台中没有响应。
有什么想法吗？我刚从Vue开始，希望你能帮我。
编辑：看起来甚至没有启动这个函数。我试过v-on:click="console.log('Clicked')"，但什么也没发生。
<input type="hidden" name="id_discipline" id="id_discipli
浏览 1提问于2019-02-04得票数 1
回答已采纳
1回答
我在.asp线程中看到过这个问题，但我没有使用.asp，所以答案不是很有帮助。我正在使用html，但如果需要的话，也可以使用javascript来实现这个目标。
我所拥有的是一个标准的html输入，其中包含可用选项的datalist，如下所示：
<input id="test_input" list="test" name="test" placeholder="Type your answer" value="" />
<datalist id="test">
<se
浏览 0提问于2012-05-22得票数 0
回答已采纳
我正在尝试基于datalist选择填充一个输入字段。因此，如果某人选择名称jimmy.johns，则输入字段应填充5555555555。这是我的密码。
<html>
<head>
<title>Countdown</title>
<input name="customer" list="customer" />
<datalist id="customer">
</datalist>
<br>
<br>
<input id =
浏览 1提问于2015-05-18得票数 0
回答已采纳
单击输入字段时，将显示类似于列表的下拉列表。当尝试用javascript click()做同样的事情时，它不起作用。为什么不行？它能被修复吗？ document.querySelector('.button-click').addEventListener('click', () => {
console.log('Event');
document.querySelector('#my_list').click();
});
document.querySelector('.button-focus
浏览 14提问于2021-08-08得票数 1
回答已采纳
有没有办法在用户单击输入之后，才使用map()将对象感觉到datalist元素中？ 例如，我希望下面的语言列表仅在用户单击其输入时才开始填充数据： import React, { Component } from 'react';
import languages from './languages.json';
const langLi = languages.languages.map(languages => // i want this to happen only after clicking the input
&
浏览 21提问于2020-07-18得票数 0
我正在开发一个利用HTML和JS的网络脚本生成器。用户输入值，并且每次使用onChange、onKeyUp或OnClick事件触发器触发当前表单值通过JS函数运行时，输出都会自动生成/更新输入值。 任何输入元素，包括文本和单选类型，都可以很好地工作，但为了节省空间，我想使用select或datalist加上option元素将一些单选列表转换为下拉菜单。但是，执行此转换似乎会破坏某些东西，并且函数不再运行或不会生成输出。 我猜我在这里遗漏了一些基本的形式概念。这里的代码片段显示了我正在尝试做的事情的简化摘要。我尝试过在选项标签和select标签中包含事件触发器onSelect、onChange
浏览 51提问于2021-10-06得票数 1
1回答
我想定制datalist下拉显示的方式。我现在有以下数据列表
<input type="text" id="employee" list="employee">
<datalist id="employee">
<option value="John Doe">John Doe (ID: 1)</option>
<option value="Jane Doe">Jane Doe (ID: 2)</option>
浏览 2提问于2015-04-27得票数 1
回答已采纳
使用VB.net。我有一个带有asp.net数据表的网页，其中有一个数据表。通过单击图像(位于单个datalist记录中)，我希望在同一个datalist记录中隐藏表的一行。我使用一个带有javascript onclick和数据人的ItemDataBound的图像来完成这个任务。不能让它起作用。什么都没发生。
Protected Sub DataList1_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataListItemEventArgs) Handles DataList1.Ite
浏览 3提问于2014-03-14得票数 1
回答已采纳
1回答
是否有使用JavaScript或PHP模拟用户行为(单击、输入)的优雅方法？我在设想一些类似于：
在文本框中输入某些内容。
单击“提交”按钮
单击显示在以下页面上的链接(我可以预测的位置，但不能预测URL本身)
汇总页面结果并返回给我。
不知怎么的，iFrame对我尖叫，但还有其他的方法吗？此外，内容将是一个外部网站，因此iFrame交叉脚本将引发错误.
浏览 4提问于2012-02-20得票数 0
回答已采纳
1回答
我有一个数据表的输入。行为的一部分涉及输入在一定条件下被模糊。然而，当我调用blur()时，datalist并没有像我预期的那样消失，更糟糕的是，单击屏幕上的其他位置也不会导致它消失；我被迫单击屏幕上的另一个输入(而不仅仅是任何其他元素)，或者单击该输入中的回退，然后单击走开以使其消失。我是错过了什么还是这是不可避免的？
以下是最起码的例子：
document.getElementById('testinput').addEventListener('input', e => e.target.blur())
<input id="tes
浏览 4提问于2022-08-25得票数 0
回答已采纳
我有一个datalist标签，它允许我的用户有一个建议框。现在我知道这个特性在safari中不受支持。那么我能做些什么来解决这个问题呢？
这是我的代码-我实际上是用数据库动态地填充我的值。
<select id="select_departure_city"style="border-radius:6px" onchange="this.nextElementSibling.value = $('#select_departure_city option:selected').text().trim()"></s
浏览 4提问于2017-12-24得票数 2
我们的页面上有这个滑块组件。这是一个纯Javascript库：
它的DOM大致是这样的：
<div>
<input value="8">
<output>50 km</output>
<datalist>
<option value="0" label="1 km">1 km</option>
<option value="1" id="1km">5 km</opti
浏览 2提问于2020-02-06得票数 0
回答已采纳
据我所知没有，但我想我会问。
我有文字输入。当您键入并填充附加到输入的datalist时，将动态获取自动完成建议。通常情况下，键入某些内容并按下“搜索”按钮会显示一个搜索结果表以供选择。
由于datalist基本上是完全相同的，但是很简单，并且从它中选择一个选项是明确的，所以我希望它只继续使用我的选择处理程序，而不必第二次为选择打开列表。但是，当这个人手动键入某些内容时，我仍然希望他们能够显式地从列表中选择，特别是因为有些选项可能是其他选项的子字符串，所以我不希望它自动为您选择一个结果，如果结果匹配到一半的话。
浏览 5提问于2022-08-19得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
