datalist 相关问题

用于在列表中呈现数据的ASP.NET控件。

我有一个关于 iOS Safari 如何处理数据列表的问题。以下代码在所有桌面浏览器上都能正常工作。 ... 我有一个关于 iOS Safari 如何处理数据列表的问题。以下代码在所有桌面浏览器上都可以正常工作。 <!DOCTYPE html> <html> <body> <form action=""> <label>Favorite fruit: </label> <input list="fruits" id="fruitsInput" autocomplete='off' autocorrect='off' spellcheck='off'/> <datalist id="fruits"> <option value="Apple">Apple</option>/> <option value="Peaches">Peaches</option>/> <option value="Pear">Pear</option> /> <option value="Apricot">Apricot</option> /> <option value="Banana">Banana</option> /> </datalist> <button onclick="datalistcall()" type="button"> Click Here </button> </form> <p id="output"></p> <script type="text/javascript"> function datalistcall() { var o1 = document.getElementById("fruitsInput").value; document.getElementById("output").innerHTML = "You select " + o1 + " option"; } </script> </body> </html> 它显示一个可以通过数据列表菜单填充的文本字段。单击按钮时，将显示所选项目。在 iOS Safari 上，输入字段显示有一个小箭头来显示菜单，它也工作正常。但数据列表当然也用于开始输入，浏览器通常会调整菜单相应的项目。在 iOS Safari 上，不显示菜单，而是将相关项目显示在键盘上方的一行上（参见图 1）。然后您可以选择一个项目，然后……什么也没有发生！项目列表消失（参见图 2），输入字段中没有任何变化，也没有触发任何事件。我是否遗漏了什么或者数据列表在 iOS safari 上无法使用？ ios更新17.4.1后也有同样的问题。在 Chrome 和 Safari 上。在以前的版本上它工作得很好。并且仍然没有如何修复它的信息（

html iphone safari datalist

回答 1 投票 0

ASP.NET 中的 DataList 取消编辑 - 如何返回到已编辑的项目

DataList的取消事件有以下代码 protected void Cancel_Command（对象发送者，DataListCommandEventArgs e） { ItemsList.EditItemIndex = -1; 绑定列表(); ...

asp.net datalist

回答 1 投票 0

在DataList ItemdataBound事件中，如何通过列名而不是通过ItemArray索引访问

在下面的代码中，strUsername 始终返回为空字符串“”（其他列也是如此）。但是，如果我使用 ItemArray 并通过传递列索引来访问它，它就可以正常工作。如何

asp.net datalist itemdatabound dataitem

回答 1 投票 0

ASP C# Datalist OnItemDataBound 事件更改另一个单元格内容

我对asp/c#相当陌生，我正在开发一个项目，当运行sql存储过程时将根据数据生成一个报告，我现在正在使用“the”填充一个datalist表顶...

javascript c# asp.net datalist

回答 2 投票 0

如何使用 Eval() 将数据源的值绑定到数据列表中的复选框

我的 asp.net 页面中有一个数据列表。我在代码隐藏中将数据源绑定到它我在此数据列表中有一个复选框。 var n = 来自 DataContext.Context.GalleryImages 中的 gi 加入 g

asp.net checkbox datalist

回答 3 投票 0

ASP.NET 数据列表分页索引错误“索引 -6 为负数或超过行数。”

当我单击 btn_Last 按钮时，出现此错误： System.IndexOutOfRangeException: '索引 -6 为负数或超过行数。每当我更改 pagesize 值时，我更改的值就是 s...

c# asp.net datalist

回答 1 投票 0

如何让浏览器在设置默认值时显示所有数据列表选项？

我有一个带有数据列表的 HTML 表单，其中的值是使用 PHP 设置的，例如我有一个带有数据列表的 HTML 表单，其中的值是使用 PHP 设置的，例如 <input list="values" value="<?php echo $val; ?>"> <datalist id="values"> <option value="orange"> <option value="banana"> </datalist> 我希望用户看到数据列表中的选项，以及来自 PHP 的当前值。但是，“自动完成”操作会导致列表中与当前值不匹配（或以当前值开头）的值从列表中隐藏，例如 $val='apple'。有什么办法可以避免这种情况，或者这种行为是由浏览器修复的吗？ <datalist> 使用自动完成功能，因此这是正常行为。例如，如果您将输入值设置为“o”，您将在数据列表选项中仅看到orange。它从第一个字母开始检查单词。但如果您将输入值设置为“a”，那么您根本不会看到选项。因此，如果输入中已经有值，那么数据列表选项中将不会显示任何内容，除非该值存在。它的行为不像选择。解决此问题的方法是使用 jquery，例如： $('input').on('click', function() { $(this).val(''); }); $('input').on('mouseleave', function() { if ($(this).val() == '') { $(this).val('apple'); } }); 完整测试在这里：https://jsfiddle.net/yw5wh4da/ 或者您可以使用<select>。对我来说，在这种情况下这是更好的解决方案。我发现使用 click 和 mouseleave 事件并不理想，因为它们无法使用键盘控件。所以我想出了这个辅助函数：更新：输入后触发blur()事件正如 @Joe Platano 所评论的，我们可以通过在输入事件后触发 blur() 来改进数据列表行为（至少对于基于 chromium/blink 的浏览器）。 keepDatalistOptions('.keepDatalist'); function keepDatalistOptions(selector = '') { // select all input fields by datalist attribute or by class/id selector = !selector ? "input[list]" : selector; let datalistInputs = document.querySelectorAll(selector); if (datalistInputs.length) { for (let i = 0; i < datalistInputs.length; i++) { let input = datalistInputs[i]; input.addEventListener("input", function(e) { e.target.setAttribute("placeholder", e.target.value); e.target.blur(); }); input.addEventListener("focus", function(e) { e.target.setAttribute("placeholder", e.target.value); e.target.value = ""; }); input.addEventListener("blur", function(e) { e.target.value = e.target.getAttribute("placeholder"); }); } } } <div style="display:flex; gap:1em;"> <div> <h3>Keep datalist options</h3> <input class="keepDatalist" type="text" list="data" value="apple"> <datalist id="data"> <option value="apple"> <option value="orange"> <option value="banana"> </datalist> </div> <div> <h3>Default behavior</h3> <input type="text" list="browser" value=""> <datalist id="browser"> <option value="firefox"> <option value="opera"> <option value="safari"> </datalist> </div> </div> 主要概念基本相同：将当前输入值保存到占位符属性重置焦点值以显示所有数据列表选项将实际输入值与输入上的占位符交换此函数还会更新输入事件的当前值 - 否则在通过 Tab 键导航到下一个输入后您将丢失当前值。为什么你不应该搞乱表单元素的默认行为例如，Firefox 不会接受这种黑客攻击 - 可能有充分的理由。处理表单时，您的首要任务始终应该是：可靠性：即使在不太现代的浏览器中也可以成功提交表单数据辅助功能：自定义黑客也适用于使用屏幕阅读器（如 NVDA 或 JAWS）的视障人士因此，如果您的自定义表单元素行为提供了可靠且可预测的用户体验，您应该始终“三重/四重检查”。 HTML： <input list="values" placeholder="select"> <datalist id="values"> <option value="orange"> <option value="banana"> <option value="lemon"> <option value="apple"> </datalist> JS： $('input').on('click', function() { $(this).attr('placeholder',$(this).val()); $(this).val(''); }); $('input').on('mouseleave', function() { if ($(this).val() == '') { $(this).val($(this).attr('placeholder')); } }); 上面的解决方案很棒，但是如果用户自然地只是单击输入框中占位符值旁边的按钮，打算保留并继续它，那么它将被完全擦除。因此，基于上述解决方案，我为我做了以下解决方案： HTML： <input id="other" list="values" value="<?php echo $val; ?>"> <datalist id="values"> <option value="orange"> <option value="banana"> </datalist> JS： jQuery(document).ready(function ($) { function putValueBackFromPlaceholder() { var $this = $('#other'); if ($this.val() === '') { $this.val($this.attr('placeholder')); $this.attr('placeholder',''); } } $('#other') .on('click', function(e) { var $this = $(this); var inpLeft = $this.offset().left; var inpWidth = $this.width(); var clickedLeft = e.clientX; var clickedInInpLeft = clickedLeft - inpLeft; var arrowBtnWidth = 12; if ((inpWidth - clickedInInpLeft) < arrowBtnWidth ) { $this.attr('placeholder',$this.val()); $this.val(''); } else { putValueBackFromPlaceholder(); } }) .on('mouseleave', putValueBackFromPlaceholder); }); 对于我来说，页面上有很多输入框，我只希望这个输入框具有这种行为，所以我使用 id 并将其设置为“个人”。如果您希望将其更改为更通用的函数，则必须将 putValueBackFromPlaceholder 与发生单击的元素以及事件本身绑定。基于建议的解决方案的另一种选项，保留先前的值或选择的新值。 // Global variable to store current value var oldValue = ''; // Blank value when click to activate all options $('input').on('click', function() { oldValue = $(this).val(); $(this).val(''); }); // Restore current value after click $('input').on('mouseleave', function() { if ($(this).val() == '') { $(this).val(oldValue); } }); https://jsfiddle.net/jpussacq/7Ldbc013/ 最干净的选项可能是 Mozilla.org 推荐的选项。 input.onfocus = function () { datalist.style.display = 'block'; } input.onblur = function () { datalist.style.display = 'none'; } for (let option of datalist.options) { option.onclick = function () { input.value = this.value; datalist.style.display = 'none'; } } datalist.style.width = input.offsetWidth + 'px'; datalist.style.left = input.offsetLeft + 'px'; datalist.style.top = input.offsetTop + input.offsetHeight + 'px'; datalist { position: absolute; background-color: lightgrey; font-family: sans-serif; font-size: 0.8rem; } option { background-color: #bbb; padding: 4px; margin-bottom: 1px; cursor: pointer; }<input list="" name="option" id="input" autocomplete="off" > <datalist id="datalist"> <option>Carrots</option> <option>Peas</option> <option>Beans</option> </datalist> function InputDropList_Focus(elementID) {//input must have value and valuetemp attributes const el=document.getElementById(elementID); el.setAttribute("valuetemp", el.value); el.value=""; } function InputDropList_FocusOut(elementID) { const el=document.getElementById(elementID); if(el.value !== el.getAttribute("valuetemp")) el.value=el.getAttribute("valuetemp"); } function InputDropList_OnChange(elementID, action) { const el=document.getElementById(elementID); el.setAttribute("valuetemp", el.value); el.blur(); if(action != null) action(); } function DoSmthOnChange(elementID) { const el=document.getElementById(elementID); console.log("new value: " + el.value); } <input id="mylist" list="mylistOptions" value="apple" valuetemp="apple" onfocus="InputDropList_Focus('mylist')" onfocusout="InputDropList_FocusOut('mylist')" onchange="InputDropList_OnChange('mylist', DoSmthOnChange('mylist'))" > <datalist id="mylistOptions"> <option value="apple"> <option value="orange"> <option value="banana"> </datalist> 我在动态填充<datalist>时遇到了这个问题。仅显示一个 <option>。我的用例是输入type=search，就像搜索引擎输入一样。技巧是将输入的 .value 设置为单个不间断行空格，或，或简单地“”。（不是“”。必须有一个空格“”）。因此，在动态 .append 选项之后，myDatalist.value = " ";。现在将显示所有选项。我尝试了很多东西，终于找到了这个。希望开发者喜欢这样。 <input id="mylist" list="mylistOptions" value="" onfocus="this.value=null;" onchange="this.blur();" > <datalist id="mylistOptions"> <option value="apple"> <option value="orange"> <option value="banana"> </datalist> 这是 herrstriezel 的答案（在 es6 中）的改进版本 function keepDatalistOptions(selector = 'input[list]') { // select all input fields by datalist attribute or by class/id document.querySelectorAll(selector).forEach(dataListInput => { let dataListValue = dataListInput.value dataListInput.addEventListener('focus', () => { dataListValue = dataListInput.value dataListInput.value = '' }) dataListInput.addEventListener('change', () => { dataListValue = dataListInput.value }) dataListInput.addEventListener('blur', () => { if (dataListInput.value === '') { dataListInput.value = dataListValue } }) }) } 只需将所需的默认值粘贴到输入标签中即可。无需额外的 JavaScript 编码！ <input list="skills" value="DBA"> <datalist name="skills" id="skills"> <option value="PHP">Zend PHP</option> <option value="DBA">ORACLE DBA</option> <option value="APEX">APEX 5.1</option> <option value="ANGULAR">ANGULAR JS</option> </datalist>

html browser datalist

回答 11 投票 0

jQuery 第一次在 Load 页面上无法正常工作

我有一个脚本，我通过 tempmankey 在网站上运行它。该脚本基本上是在输入字段中插入数据列表，并根据所选数据列表更改其他输入值

javascript jquery validation tampermonkey datalist

回答 0 投票 0

数据列表问题，需要显示在输入字段下方而不是右侧

所以我是 Angular 的新手，我一直在尝试很多事情来改变我的数据列表中选项的显示方式......它们以正确的格式显示......

html angular sass datalist

回答 0 投票 0

是否有可能使数据列表表现得像谷歌搜索栏？

我使用数据列表作为我软件的主要搜索栏。数据列表自动完成显示在桌面上，但当我尝试在 iPad 上使用它时，下拉菜单被隐藏了。回到我的问题……是

javascript php search datalist

回答 0 投票 0

数据结构使用 C# [关闭]

嗨，这是我的任务，我需要帮助您必须使用 C# 定义数据结构。数据结构应至少包含字段在下一点提到。另外，你...

c# data-structures custom-data-attribute datalist

回答 0 投票 0

有没有一种简单的方法来分析datalist中的数据集？

我有一个包含100多个数据集的datalist，每个数据集看起来像：如果我想看到M或I的数量和变量M或I的所有数据的平均值，我应该使用哪种代码？每个数据集看起来像。变量：'M''M''M''M''...'I''I''I''I''I''I''I''I' Data1 : 0.88 2.1 1.2 ... 数据2：2.6 2.5 1.8......。Data89: 3.6 4.5 6.2......。

r datalist

回答 1 投票 0

具有vue js和axios动态URL的搜索过滤器

这是我使用vue js的第一天，很抱歉，如果这是一个愚蠢的问题。我正在尝试使用axois从Url调用json数据时进行搜索输入。我的代码： ]

javascript vue.js search axios datalist

回答 1 投票 0

烧瓶是否修剪项目？

[在Flask中并使用Jinja2，我正在调用数据列表，但由于某种原因，任何带有空格的选项都被剪裁了，因此“西红柿酱”变成了“西红柿”。这是Flask正在执行的操作还是我搞砸了...

html flask jinja2 flask-wtforms datalist

回答 1 投票 0

比较多个数据列表并显示不同的结果

我对编码非常陌生，因此如果这是一个愚蠢的问题，我已经感到抱歉。我想比较四个包含所有国家/地区列表的数据列表。用户应该在第一个...中选择一个国家/地区。