如何清除点击时的数据列表输入?

2023-11-26

我在 Lit-Element Web 组件中有这个数据列表:

<input list="cars" name="car" placeholder = "Type car name">

<datalist id="cars">
  <option value="Jeep">
  <option value="Lamborghini">
  <option value="Ferrari">
  <option value="Fiat 500">
  <option value="Gran Torino">
</datalist>

如果我从列表中选择这些选项之一,然后再次单击输入字段,我将看不到选项列表,而只能看到所选选项。如果我想查看所有选项,我必须用键盘手动删除输入字段上写的选项。

即使选择了其中一个选项,是否存在一种显示所有选项的方法?

或者更好的是,是否存在一种方法可以在焦点或单击时清除输入字段?

没有 JQuery。


Create onfocus and onchange你的听众input选择选项后清除焦点的元素,然后清除焦点上的输入。

<input list="cars" name="car" onfocus="this.value=''" onchange="this.blur();" placeholder = "Type car name">

<datalist id="cars">
  <option value="Jeep">
  <option value="Lamborghini">
  <option value="Ferrari">
  <option value="Fiat 500">
  <option value="Gran Torino">
</datalist>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何清除点击时的数据列表输入? 的相关文章

随机推荐

  • C# 中数组索引的类型?

    C 中数组索引的类型是什么 例如 在下面的代码中 在访问数组元素 第三行 之前 索引是否会被转换为 int T myArray new T 255 byte index 2 T element myArray index 如果不是 使用 b
  • 是否可以使用其他 cpp 文件中的#define?

    我认为预处理器会一一处理文件 而我不知道如何使用包含来处理文件 所以我认为这是不可能的 但很高兴听到其他人的想法 我有在a cpp define A 1 我想用它2 cpp 编辑 我无法修改第一个文件 所以现在我只是复制了定义 但问题仍然存
  • HTML 转 PDF 与通过 PHP 以编程方式创建 PDF

    我有一个 PHP 应用程序 需要生成一些带有漂亮页眉 页脚的 PDF 发票和 PDF 时间表 一些 Stackoverflow 用户建议使用 TCPDF 创建 PDF 文档 在我的研究中 我发现了两种生成 PDF 的方法 1 以编程方式格式
  • 如何在 IE 中的文档上触发“onload”事件

    我目前正在为 Javascript 方法开发单元测试 用于检测文档的准备情况 该代码已经处于框架级别 因此请避免提及已在 jQuery 或其他库中实现的代码 我已使用以下代码成功模拟了 readystatechange 更改事件 var e
  • 从 scala 使用 Function java 接口的流畅方式?

    在工作中 大多数人都使用 Java 而我则使用 Scala 我们决定将一些常见的类收集到一个用 Java 编写的库中 现在我想向库中添加一些伪函数式编程 看看以下内容 java public interface Func
  • 在 JSF 中显示上传的图像

    我有一个视图范围的 bean 我在其中创建了一个人 一个人可以有一张照片 这张照片上传到创建此人的同一页面 图片未存储在数据库或磁盘上 因为尚未创建该人 该 bean 必须具有视图作用域 因为可以在其他地方创建人员并且使用相同的 bean
  • Python 类丢失属性

    我有一个特殊的 python 问题 在我的 gtk python 应用程序执行过程中 我的一些类对象神秘地丢失了属性 导致我的程序的一些功能被破坏 很难解释为什么会发生这种情况 我从来没有故意删除属性 并且有问题的类继承自我自己编写的类 而
  • Android - 在webview中登录后提取cookie

    我有一个在 web 视图中打开 url 的应用程序 然后用户必须通过 web 视图登录到站点并在登录后收到 cookie 我在登录后获取 cookie 时遇到问题 问题是 我可以使用 android webkit CookieManager
  • 在 Angular 5 项目中创建 Web 配置文件?

    我创建了一个 Angular 5 网站 我想使用 Webform 或 MVC 部署给客户 我只想更改 webconfig 文件中的一些变量 dbconnection 名称等 但使用 Angular 我不知道如何去做吧 那么每次部署的时候都得
  • 如何防止 Jetpack Compose 中不必要的重组

    我有一个TextField对于搜索查询和Button这将执行搜索 结果显示在列中 由于搜索需要几秒钟才能运行 我希望它在按下按钮时执行 而不是在文本更改时执行 这是一个简化的演示 Column val list remember mutab
  • 活动页面和背景页面

    由于 Chrome 扩展文档中没有明确的解释 所以我来这里寻求帮助 我了解到 背景页面基本上是为了延长扩展的生命周期而发明的 旨在保存值或保持 引擎 在后台运行 这样就没有人注意到它 因为一旦您单击扩展程序的图标 您就会看到他们所说的 弹出
  • 意外异常:SQLSTATE[HY000] [1045] 用户 ****@'localhost' 的访问被拒绝(使用密码:YES)

    一位老同事交给我一个申请来管理 但是 每当我尝试运行它时 我都会收到此错误 请任何帮助都可以 有时访问被拒绝异常错误 因为您的 mysql 凭据无效 其次 根据我的经验 我观察到这种情况也会发生 因为您没有为数据库连接设置密码 例如 pri
  • 如何从shared_ptr调用私有析构函数?

    我有一个resource manager类维护一个std vector
  • WCF 服务 netTCP 绑定

    我想使用 netTCPbinding 所以我改变了我的网络配置 如下所示 我遇到这个错误 找不到与绑定 NetTcpBinding 的终结点的方案 net tcp 相匹配的基地址 注册的基地址方案是 http 如何解决这个问题
  • 如何从 NodeJS 服务器向客户端发送信息?

    例如 我想向客户端发出信号 表明通过 POST 方法以 HTML 表单发送的用户名已存在于我的数据库中 我知道如何使用 body parser 恢复 POST 数据 并且知道如何在 MySQL 数据库中查找它 我知道我可以使用 Ajax 直
  • 如何在 Java 中获得 UNIX 正常运行时间?

    在 Java 中获得 UNIX 正常运行时间的最佳方法是什么 是否有我可以使用的标准 Java 库 函数 或者我应该使用 Runtime 的 exec 或 ProcessBuilder 来执行 正常运行时间 谢谢 你可以阅读 proc up
  • Azure Web 角色上的 WaitHandleCannotBeOpenedException 以 Task.Wait() 开头

    以下 Web 角色入口点返回后会导致引发以下异常 public class WebRole RoleEntryPoint public override bool OnStart Task Run gt Anything can be he
  • javascript 错误:无法在“文档”上执行“elementsFromPoint”:提供的双精度值是非有限的

    我最近将我的 chrome 版本更新到最新版本 即79 0 3945 130 Official Build 64 bit 并从下载兼容的 chromedriverhere 我已经开始面临这个错误了 在详细调试时我发现Select导致问题的类
  • python csv只写入某些字段名称,而不是全部

    我一定错过了一些东西 但我不明白 我有一个 csv 它有 1200 个字段 我只对 30 感兴趣 你如何让它发挥作用 我可以读 写整个 shebang 这没关系 但我真的很想写出 30 我有一个字段名列表 我有点修改标题 我将如何翻译下面以
  • 如何清除点击时的数据列表输入?

    我在 Lit Element Web 组件中有这个数据列表