Web前端—既可以输入又可以选择的input框

最新推荐文章于 2024-04-30 17:59:49 发布
最新推荐文章于 2024-04-30 17:59:49 发布
阅读量2.3w 收藏 14
点赞数 9
分类专栏： Web前端 文章标签： html5 web前端 datalist autocomplete
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yingdynasty/article/details/50115901
版权

又是一周，以前总说码农码农现在才理解为什么这个职业刚开始就是搬砖的了

废话就到此为止

今天给大家说一下如何利用HTML5特性写一个既可以输入又可以选择的输入框

其实在HTML5中，有这样一个属性的Input框 叫做 Datalist

顾名思义就是利用已有的Data为用户提供选择项


具体代码如下

<input list="companys"/>
<datalist id="companys">
  <option value="Apple">
  <option value="Microsoft">
  <option value="Github">
</datalist>

PS:这里的list一定要跟Datalist id 一致哦 
这段代码实现了下列效果如图：


还可以实现自动补全功能哦.



 作者用这种方法替代了JQuery的Autocomplete功能但是不建议这么做因为机制不同

php渲染页面需要很长时间 对于大数据量的还是建议autocomplete哈，如果有更好的方法

欢迎留言


对于后端来说这里笔者以PHP 举例 


只遍历数据 逐一赋值给<option value>即可

但还是那句话：少量数据建议这么做

具体代码给个Demo吧


简单实用的小技巧分享给大家把 

还是那句话 希望能帮到大家

PS 本人就是一只菜鸡 所以慢慢提升技术含量再给大家写深度好文吧 


哈哈哈


Michael_Zhu_007
关注
  • 9
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
既能输入又能选择的下拉框
幻梦星空的小窝的博客
01-07 1703
今天做项目时遇到了一个小难题：就是用户可以自己输入又能选择的下拉框 代码如下： 可以输入的select标签                   希望用于       请输入用途     置业定投 亲子定投 养老定投 指赢定投 大额定投 请输入或选择项目                             我将准备
html 输入选择框
一步一步的前进
07-26 1873
html 实现输入选择框
HTML中input输入框（详解输入框的用法）
最新发布
百赢出品，必属精品
04-30 9953
input>元素是HTML表单中最常见的元素之一，用于收集用户的输入数据。它可以包含多种类型的输入，如文本、密码、数字等。通过指定不同的type属性，可以定义不同类型的输入字段。类型（type）属性定义输入字段的类型，如文本框、密码框、单选按钮、复选框等。常见类型包括textpasswordradiocheckboxfile等。名称（name）属性用于标识输入字段的名称，以便在表单提交时能够将数据传输到服务器。对于单选按钮和复选框，相同名称的一组按钮被视为一个组，只能选择其中的一个或多个。
前端input标签
m0_65526812的博客
11-05 1304
html,input标签
input的可输入可选择功能
zhangpiner的博客
08-10 2597
之前老大要求要写一个可输入可选择的输入框，我记得当时我是用input+select来实现的，input聚焦时显示select，input失焦时隐藏select，有点复杂了。昨天发现了个html5的新标签 datalist：指定一个预先定义的输入控件选项列表,简单实现input的可输入可选择功能。...
关于Input输入框添加下拉框（可输入、可选）
热门推荐
weixin_45078922的博客
12-08 1万+
昨天，UI突然发过来一个设计图，可输入文本框加上可选择的下拉框，原本以为很简单的事情却在我翻看组件库的一次次崩溃中变得复杂。 iview组件库中的Select框确实很像啊，但是，不能输入啊！！！！！！崩溃中。。。。 突发奇想，组件都是原生代码编写的，为啥我不能基于vue2编写一个自己的组件呢，由于代码篇幅较大，所以我选择在components中创建新的vue文件（优点：够清晰；缺点：涉及父子组件的传值问题） 既然要自己写组件，那么首先就是样式问题，一个大的div中嵌套一个Input标...
input既可以输入又可以下拉列表选择
i_chensi的博客
08-31 1679
注意：input中的list要与datalist的id一样 <input type="text" id="interval" name="interval" list="feng_kong_cuo_shi_1"datatype="*" style="width:170px;"> <datalist id="feng_kong_cuo_shi_1" > ...
Web前端开发技术-Jquery选择器.pptx
07-07
【jQuery选择器】是Web前端开发技术中一个重要的部分，它极大地简化了DOM元素的选取和操作。jQuery选择器分为多种类型，包括基本选择器、层级选择器、筛选选择器和其他选择器。 **1. 基本选择器** 基本选择器与CSS...
input 输入框内的输入事件详细分析
09-05
本文将深入探讨不同浏览器环境下input输入框内输入事件的触发机制、差异以及应对策略。 1. 基础原理： 在不同的浏览器环境下，输入事件的监听有所不同。IE浏览器使用`onpropertychange`事件来捕获输入框内容的变化...
Web（前端） input标签 上传图片支持预览，计算图片大小 源码
01-15
在Web前端开发中，`input`标签是HTML中用于用户输入数据的重要元素。在这个场景下，我们关注的是`<input type="file">`，它允许用户选择本地文件，特别是用于图片上传。为了提升用户体验，我们可以实现图片上传时的...
web前端 input添加属性就可以验证 自动验证工具
04-28
综上所述，"web前端 input添加属性就可以验证 自动验证工具" 提供了一种高效、灵活的前端验证解决方案，通过jQuery等JavaScript库，开发者可以快速构建起一套完整的输入验证机制，提升用户体验，同时减轻服务器端的...
6个非常精美的Web前端表单提交以及搜索框（四）
08-18
在本资源中，我们关注的是"6个非常精美的Web前端表单提交以及搜索框（四）"。这个主题涉及到Web开发中的一个重要方面——用户界面（UI）设计，特别是与表单交互和搜索功能相关的设计。我们将深入探讨这些知识点，并...
搜索或选择时既可以输入又可以下拉选择
Ypromise-的博客
11-09 1214
最近做一个功能要显示一个选择时要即可以输入又可以下拉选择，其实这种博客上例子特别多，学习整合了一下写了一个自己适用的。 核心 输入的时候@input事件，实时检索我们要查询的列表去获得对应数据，这里用到了indexOf方法，查找是否包含有某字符串，无返回 -1 。以及节流函数的使用，这个函数会在input事件触发的时候延时操作从而检索遍历数组的次数。 代码 直接上全部代码，很简单不复杂，理清楚逻辑就懂了。（学习代码的时候一定要先理清楚逻辑哟） <template> <div class
很多input赋值要和第一个相同！
kakaxiD的博客
06-05 920
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>实例</title> </head> <body> <table> <tr> <td>我是左边<input type="text" id="nopenaltyorder0"/></td>
input单选框改变选择
qq_35181466的博客
08-08 3214
html页面： &lt;input type="radio" name="numerical" value="price" /&gt; 值 &lt;input type="radio" name="numerical" value="scope" /&gt; 范围 js页面： $('input[type=radio][name=numerical]'
input框
小森呀
07-17 196
select：（下拉选择框） 至少包含一对option，option上设置selected="selected"表示默认选中此项 checked:（单选框，复选框） 设置此属性表示默认选中此项 单选框必须name值相同 文本域： cols:表示有多少列 rows：表示有多少行 <label for="id">值</label>： 扩大选择区域 ...
gis插入的文本怎么搞成两行_word中关于文本框的使用方法大全
weixin_39562197的博客
10-21 1285
在实际工作中，我们会经常遇到对文本框的使用，比如更改文本的形状或对文本创建链接等，今天与大家说说在使用过程中遇到的情况。1、为什么我的文本框中的文字只显示一半？其实出现这种情况比较好处理，第一种方法是通过手动调整文本框的大小，第二种是通过勾选【根据文字调整形状大小】来实现。这里推荐使用第二种方法，具体步骤：首先点击文本框，之后右击选择【设置形状格式】，然后勾选【文本选项】的【根据文字调整形状大小】...
实现一个可输入的下拉框
qq_44748911的博客
11-16 3347
实现一个可输入的下拉框
web前端input
09-08
Web前端中的input标签有多种属性和用途。根据提供的引用内容，这里有三个相关的问题。 首先，关于手机号输入的限制，可以通过设置input标签的type属性为"tel"来在移动端弹出数字键盘，以确保用户只能输入数字并限制长度不超过11位。例如，在一个文本框中输入预约手机号的示例中，可以使用以下代码： ```html <p class="input-number-p">请在下方输入预约手机号</p> <div class="input-number"> <input id="inputNumber" type="tel" maxlength="11"/> </div> ``` 其中，type="tel"会弹出数字键盘，并且通过设置maxlength属性为11，限制手机号的长度为11位。 其次，如果你想禁止用户粘贴内容到input框中，可以使用onpaste事件并返回false，如下所示的代码： ```html <input type="text" value="" onpaste="return false;" /> ``` 这样，当用户尝试粘贴内容时，粘贴事件将被阻止。 最后，如果在IOS上使用只读模式的input标签，你可能会发现在点击时会有反应。要解决这个问题，可以使用以下代码： ```html <input class="authentication-id-input" type="text" v-model="authenticationInfo.identityNumber" v-bind:readonly="inputReadOnly" unselectable="on" onfocus="this.blur()"/> ``` 这里通过在input标签中添加onfocus="this.blur()"的属性，当输入框获得焦点时，立即失去焦点，从而禁止用户输入。<span class="em">1</span><span class="em">2</span><span class="em">3</span>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值