HTML 选择和文本输入

2023-12-01

我们都见过无数的表单实例,其中一个选择下拉菜单的选项之一为“其他”,选择该选项后,我们会看到一个输入文本框(一直隐藏),要求我们输入输入内容。

有没有更好的方法来实现这个?有没有插件可以让我做得更好?或者标准 HTML 元素就足够了(可能对选择标签进行一些设置)?


你可以使用datalist。例子:

<input list="cookies" placeholder="Type of Cookie"/>

<datalist id="cookies">
    <option value="Chocolate Chip"/>
    <option value="Peanut Butter"/>
    <option value="Raisin Oatmeal"/>
</datalist>

Fiddle: http://jsfiddle.net/joshpauljohnson/Uv5Wk/

这使用户能够从 cookie 列表中进行选择,如果列表中没有找到他们要查找的 cookie 类型,则输入自己的 cookie 类型。

在您的情况下,我唯一的不满是,用户可能不会立即意识到他们可以将其用作下拉列表。但这可以通过一些 CSS 轻松解决。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML 选择和文本输入 的相关文章

  • 如何在React Native的MapView中设置标记

    我想在React Native中的MapView上设置一个标记 但是通过官方文档找不到任何信息MapView https facebook github io react native docs mapview html content 如
  • 判断字符串是否包含有效的javascript代码

    我正在寻找一个C 返回的函数true如果字符串包含有效的 JavaScript 语法 例如 IsValidJavascript alert hello 会回来true but IsValidJavascript alertXXhelloZ
  • 将时间戳转换为一个数组

    在应用程序脚本 谷歌表中运行 我从 API 获取时间戳并返回此结果 1 6370611672429312E18 1 63706107263277082E18 我执行此代码并且工作正常 但问题不在数组中 我每次都需要它在数组中 const t
  • 更新存储在 chrome 扩展本地存储中的对象

    我正在开发一个 chrome 扩展 我将存储服务器发送的对象 例如 我将收到 命令 id 1 类型 A 大小 B 优先级 C 如果我有一个数据库 我会将其作为表中的一行插入commands 使用 chrome storage 我将这些对象的
  • 我可以在 GWT 中使用第三方 Javascript 库吗

    例如穆工具 用 js 编码对我来说很舒服 但显然不适合所有人 你当然可以 最好的事情就是给自己写一些好看的JavaScript 覆盖类型 http code google com webtoolkit doc latest DevGuide
  • Firefox 忽略 CSS 中的最小高度

    由于某些原因 最小高度在 Firefox 上不起作用 我尝试在 body 上设置 min height 但 Firefox 完全忽略了它 由于我的页面是动态的 我不能只将高度设置为 100 我应该怎么办 body border 1px so
  • 检查用户设备的 GPS 是否开启

    我正在使用 jQuery Mobile 和 PHP 开发一个应用程序 我没有使用 Phonegap 或其他框架 我需要找到用户的geolocation 如果用户设备的 GPS 关闭 那么我无法获取位置 现在我需要查找用户设备的 GPS 是否
  • 将快速文本输入发送到另一个进程(窗口)

    我正在编写一个 C WPF 程序 它将文本消息发送到另一个程序的窗口 我有一个宏程序作为我的键盘驱动程序 Logitech g15 的一部分 它已经做到了这一点 尽管它不会将击键直接发送到进程 而是发送到当前聚焦的窗口 它运行良好 但我也需
  • jquery 中的函数返回未定义[重复]

    这个问题在这里已经有答案了 我在 jquery 中调用的函数返回未定义 我检查了该函数 当我对其进行调试时 它返回正确的数据 function addToPlaylist component type add to pl value pl
  • Firefox Addon 中的 JQuery 导致多个警告

    我在 Firefox 插件中使用 jquery 但我不断收到大量警告消息 如下所示 anonymous function does not always return a value System JS WARNING resource g
  • 可以禁用幻灯片的触摸模拟但不能禁用滚动条(危险的滑动器)吗?

    我的页面上有一个危险的滑动器 它成功地模拟了幻灯片和随附滚动条上的触摸事件 允许单击鼠标并移动以向左或向右滑动幻灯片 这很好 但我现在在滑动器内的幻灯片上调用了可拖动 这意味着我需要停止此触摸模拟 拖动幻灯片并同时移动它们会引起混乱 但仅限
  • 为什么 call 比 apply 快那么多?

    我想知道是否有人知道why call比apply 在 Chrome 中 速度大约快 4 倍 在 Firefox 中快 30 倍 我什至可以制作自定义原型 apply2 在大多数情况下 运行速度是apply 这个想法取自角度 Function
  • React Redux - 在辅助函数中访问现有存储

    我试图在反应组件之外获取存储实例 存储状态 即在单独的辅助函数中 我有我的减速器 我的动作 我在最上面的组件中创建了一个商店 configStore js import createStore from redux import gener
  • 为什么这些内联块元素会产生额外的宽度?

    这是这个问题的后续内容 仅使用 css 自动调整图像下的文本 https stackoverflow com questions 34185547 autofit text under image with only css 为什么这段代码
  • 我应该创建一个块还是一个元素 BEM CSS?

    Bem官网说 创建一个块如果一段代码可以被重用并且它不依赖于正在实现的其他页面组件 创建一个元素如果一段代码在没有父实体 块 的情况下无法单独使用 我有一个 关于部分 块 它的元素依赖于父级并且不能在网站中重复使用 如何根据 bem 这段代
  • onPress 方法中箭头函数与普通函数的行为

    正在学习 Native React 并学习更多关于 javascript 的知识 所以我仍然不明白它的行为的很多事情 我使用 TouchableOpacity 及其 onPress 属性创建了一个按钮组件 为了让它工作 我必须发送我想要执行
  • 如何在 TypeScript 中使用 navigation.replace ?

    我试图在我的代码中使用它 const navigation useNavigation navigation replace AllFriends 但我不断收到错误消息 Property replace does not exist on
  • Three.js点击单个粒子

    In this example http jsfiddle net agqq96bq 2 您可以看到 2 个可点击的粒子 但它们都受到点击的影响 另外 我只想检测粒子上的点击 而不将它们过滤出场景 像这儿 if intersects len
  • 如果 POST 响应仅包含 ID,如何将数据保存到我的 Ember 存储?

    Ember 数据期望我的服务器在每次成功后返回完整的对象POST 但是 我的 API 只返回一种元对象 其中包含id 当 Ember 收到此对象时 记录中的现有数据将被删除 除了id 例如 当我这样做时 var asset App Asse
  • 将引导程序弹出框保留在视口内

    我正在尝试使用带有按钮的侧边栏创建一个菜单 每个按钮都有一个指定的包含相关数据的弹出窗口 不幸的是 其中一个弹出窗口可能包含任意数量的行 并且在某些情况下它可能部分位于视口之外 See http jsfiddle net bfd9f 1 h

随机推荐

  • Talend:java.lang.UnsatisfiedLinkError:java.library.path 中没有 sapjco3

    我的 jar 和 dll 位于 Talend lib 目录中 路径和类路径已设置 我还下载并安装了 VC 2005 redistribution sp 1 补丁以及 SAP 提供的缺少的 dll 我尝试在 Windows 2003 机器和
  • Gekko 的最佳解决方案

    我想使用 hyperopt 进行超参数优化 但在找到超参数搜索空间的正确公式时遇到问题 我的问题的最佳解决方案是 0 4050 2100 2100 1200 0 0 450 150 我的尝试代码 from gekko import GEKK
  • 将URL请求的内容写入文件

    我正在尝试使用 python 从 php 文件中获取列表并将其保存到文件中 import urllib request page urllib request urlopen http crypto bot hopto org server
  • 检查文本字段是否包含javascript中的字母

    我是 Javascript 新手 我想知道是否有办法检查文本字段输入是否包含数字以外的任何内容 我知道如何在 Java 中做到这一点 但 Javascript 对我来说是完全不同的事情 是的 只是字符串上的标准正则表达式 var str m
  • 清除 Spyder 中的历史记录窗格

    我不知道 Spyder 历史保留了多少行 但是 3个月前执行的命令没有机会被搜索回来再次运行它们 历史记录中的大多数命令只是对 python 文件的调用 重新打开文件来运行它也很容易 启动 IDE 时必须加载这个长列表 从而增加了加载时间和
  • 使用 Python 模拟 Linux 中的击键

    如何在Python中模拟击键 我还想同时按下多个键 就像是 keystroke CTRL F4 or keystroke Shift A 考虑python uinput and evdev 的例子shift a与后者 from evdev
  • python(pygame)中动画速度的问题

    我正在制作一个忍者游戏 其中忍者必须通过跳跃 按空格键 来躲避障碍物 但是跳跃动画太快 忍者无法跳过障碍物 我希望它跳得慢一点 以便让它跳出障碍物 即使按下按键后松开 也能跳到394 y值 然后再下来 请注意 我是初学者 import py
  • Oracle SQL 选择匹配查询

    我有下面这个表 uid rid time type date time a11 1 1 5 4 2013 00 32 00 row1 a43 2 1 5 4 2013 00 32 01 row2 a68 2 2 5 4 2013 00 32
  • 如何用狮身人面像制作2列

    我想在我的文档中创建多个列 在全球范围内 我想做类似的事情这个主页 其中有 3 栏 一栏包含当前版本 一栏包含新闻和更新 以及基础知识 当我在谷歌上搜索 Sphinx 中的多列时 我发现将列表分成两列 这不是我的情况 在维基上 我发现的多列
  • 如何根据平均值、中位数、第 1 和第 9 十分位数值生成数据集?

    我有以下描述数据集的值 Number of Samples 5388 Mean 4173 Median 4072 1st Decile 2720 9th Decile 5676 我需要生成适合这些值的任何数据集 我发现的所有例子都要求你有标
  • PyQt5 TabWidget tabBarClicked TypeError:本机 Qt 信号不可调用

    我正在尝试使用 PyQt5 制作用户界面 如果我单击第 5 个索引选项卡 userSettings 函数将调用 但程序会引发此错误 self tabWidget tabBarClicked 5 connect self userSettin
  • python minmax仅使用递归

    我正在尝试构建一个函数 该函数接受一个列表并返回一个 最小值 最大值 的元组 例如 2 1 4 9 4 5 会回来 1 9 我尝试仅使用递归 并且希望执行此任务 而不使用其他可以使此操作变得非常简单的东西 例如 min max sort s
  • WP7 图像 Uri 作为 StaticResource

    我有一个 Windows Phone 7 应用程序 我正在尝试将一些常见元素移动到资源文件中 文本和样式工作正常 但我正在努力寻找正确的方法来划分 Uri 这是我正在尝试开始工作的代码示例
  • 权限从publish_stream迁移到publish_action

    我想知道您是否拥有publish stream 的用户权限 并且您希望从现在开始publish action publish stream 是否涵盖这两者 还是我们需要重新请求用户权限 如果是这样 检测他们是否获得此权限等最简单的方法是什么
  • SaaS - 共享数据库中租户特定的查找数据

    我正在开发基于多租户 SaaS 的应用程序 并使用共享数据库在 TenantId 列的帮助下存储所有租户记录 现在的问题是我有一些查找记录列表需要为所有租户共享 例如游戏列表 游戏桌 Id GameName 还有另一个表用于仅存储租户特定记
  • SQL Split 函数处理文本限定符之间出现分隔符的字符串?

    有多种 SQL 分割函数 从循环驱动到使用 xml 命令 甚至使用数字表 我还没有找到支持文本限定符的 使用下面的示例字符串 我想在 上分割 但当它出现在双引号或单引号之间时则不分割 示例数据 email protected Sally H
  • 从 Matlab 轮廓函数中选择等值线

    Matlab 轮廓函数 和 imcontour 绘制矩阵不同级别的等值线 我想知道 如何操纵该函数的输出以便接收每个轮廓的所有 x y 坐标以及级别 如何使用输出 C h 轮廓 来实现上述任务 另外 我对操纵底层网格不感兴趣 它是一个连续函
  • 当输入获得焦点时 CSS 改变图标颜色

    我希望用户图标和锁定图标在输入聚焦时改变颜色 但我不知道该怎么做 有人可以帮助我吗 我希望图标颜色为 c0392b div class input icons span class fa fa user span div
  • 函数声明 - 函数表达式 - 作用域

    在javascript中 函数声明和函数表达式在作用域方面有什么区别 函数声明意味着我们正在污染全局空间 函数表达式的情况是一样的吗 函数声明 function sum logic goes here 函数表达式 var sum funct
  • HTML 选择和文本输入

    我们都见过无数的表单实例 其中一个选择下拉菜单的选项之一为 其他 选择该选项后 我们会看到一个输入文本框 一直隐藏 要求我们输入输入内容 有没有更好的方法来实现这个 有没有插件可以让我做得更好 或者标准 HTML 元素就足够了 可能对选择标