带下拉效果的文本输入框的实现

最新推荐文章于 2017-03-18 16:08:54 发布
最新推荐文章于 2017-03-18 16:08:54 发布
阅读量880 收藏
点赞数
分类专栏： js 文章标签： xhtml input html 文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ynztpwl/article/details/6789493
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
 function getValue(value,inputId){
  document.getElementById(inputId).value=value;
 
 }
</script>
</head>

<body>
<div style="position:relative;"> <span style="margin-left:100px;width:18px;">
  <select name="select" style="width:118px;margin-left:-100px" οnchange="getValue(this.value,'addressInput')">
    <option value="Ajax">Ajax</option>
    <option value="XML">XML</option>
    <option value="xmlHTTP">xmlHTTP</option>
    <option value="CSS">CSS</option>
  </select>
  </span>
    <input name="tag" id="addressInput" style="width:95px; border-style:none;position:absolute; left:2px; height:14px; ; top: 2px;" value="输入或选择" οnmοuseοver="this.select()" />
</div>
</body>
</html>

ynztpwl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
QT版QQ登陆框的账号下拉菜单
11-28
仿2013QQ登录框的账号栏，下拉带头像，删除按钮。
【qt】下拉列表组件
最新发布
qq_74047911的博客
05-16 1650
对于Combo Box组件，我们主要注意一下那几个添加方法，后获取的方法。成功的确需要一步一个脚印的积累，勤奋和汗水是成功的基础和前提！
可输入文本的下拉框
liu_yanhui的专栏
05-27 261
[code="Html"] New Document &nbsp; 工作日时限： 5 10 15 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;天
带输入功能的下拉列表
04-22
这个是平时搜集的一些代码，希望对你有用，不客气
QT 搜索下拉框 类似网页
05-11
输入栏使用linEdit ，获取焦点，展示下拉界面，界面显示当前栏位内内容的模糊查询信息；失去焦点或点击界面其他位置，下拉界面小时。 下拉界面使用QWidget，根据lineEdit的内容展示对应的信息
ajax实现输入框文字改变展示下拉列表的效果示例
12-11
在本文中，我们将深入探讨如何使用Ajax技术来实现在输入框中输入文字时动态显示下拉列表的效果。这种效果在很多交互式应用中非常常见，例如搜索引擎、网站表单等，能够提供用户友好的交互体验。 首先，我们来看样式...
根据选择不同的下拉值出现相对应的文本输入框
09-05
这个场景在【标题】"根据选择不同的下拉值出现相对应的文本输入框"中得到了很好的体现。【描述】中提到，这种功能在某些情况下非常实用，特别是当用户需要按需输入不同类型的资料时。 为了实现这个功能，我们可以...
swift-YJDropdownListView文本输入框下拉列表
08-15
Swift-YJDropdownListView文本输入框下拉列表是一个用于iOS应用开发的开源组件，它主要针对Swift编程语言设计，便于在用户界面中实现类似输入框下拉列表的功能。这个组件可以帮助开发者快速创建一个交互式的文本...
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
09-02
本示例介绍如何实现这一功能，特别是当用户点击下拉菜单的A选项时显示文本输入框，而点击B选项时显示图像上传框。 首先，我们需要在HTML中设置基础结构。一个Bootstrap的下拉菜单通常包括一个`<button>`或`<a>`元素...
下拉输入框
05-28
它结合了文本输入框和下拉菜单的功能，允许用户在输入文字的同时从预定义的选项列表中选择值。这种控件提高了用户体验，因为它减少了用户在小屏幕上手动输入的繁琐，同时确保了数据的一致性和准确性。 ### 1. 下拉...
JSF加入Ajax功能的下拉框自定义组件（含源代码）
02-20
JSF加入Ajax功能的下拉框自定义组件，含源代码。
jquery实现动态添加文本框和下拉框效果
07-03
jquery实现动态添加文本框和下拉框效果。
PyQt5 文本输入框自动补全QLineEdit的实现示例
12-17
一、QCompleter类 自动补全会用到的一个类 主要代码 def init_lineedit(self): # 增加自动补全 self.completer = QCompleter(items_list) # 设置匹配模式 有三种： Qt.MatchStartsWith 开头匹配（默认） Qt.MatchContains 内容匹配 Qt.MatchEndsWith 结尾匹配 self.completer.setFilterMode(Qt.MatchContains) # 设置补全模式 有三种： QCompleter.PopupCompleti
Qt实现windows IP输入框，非QLineEdit
08-15
Qt实现windows IP输入框（IPV4），不是使用的QLineEdit设置inputmask实现
QT 源码 向文本框中插入文本，一次一行 比较简单
10-02
QT 源码 向文本框中插入文本，一次一行 比较简单。程序比较简单，但是，以小见大，你可以发现QT中界面设计都是一样的，
Qt实现输入框,组合框提示,模糊查询,搜索关键字下拉提示功能
山水人间。
03-18 1万+
MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) { QWidget *NewWin = new QWidget; NewWin->resize(QSize(200,100)); //使输入框具有初始化提示语句 QLineEdit *MyEdit = new
Qt5学习笔记（6）——下拉列表框QComboBox类
热门推荐
raiven2008的专栏
02-02 6万+
下拉列表框QComboBox类
layui 写一个表单，包含：报表名称(文本输入框),报表组（下拉文本输入框）,报表路径（文本输入框），报表抽样条件路径（文本输入框），是否启用（开关）
05-26
可以使用 layui 的 form 模块和 select 模块来实现这个表单。以下是示例代码： HTML: ```html <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">报表名称</label> <div class="layui-input-block"> <input type="text" name="report_name" required lay-verify="required" placeholder="请输入报表名称" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">报表组</label> <div class="layui-input-block"> <select name="report_group" lay-verify="required"> <option value=""></option> <option value="group1">分组1</option> <option value="group2">分组2</option> <option value="group3">分组3</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">报表路径</label> <div class="layui-input-block"> <input type="text" name="report_path" required lay-verify="required" placeholder="请输入报表路径" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">报表抽样条件路径</label> <div class="layui-input-block"> <input type="text" name="sample_path" required lay-verify="required" placeholder="请输入抽样条件路径" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">是否启用</label> <div class="layui-input-block"> <input type="checkbox" name="enable" lay-skin="switch" lay-filter="switchTest" lay-text="启用|禁用"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> ``` JavaScript: ```javascript <script> //Demo layui.use(['form', 'layedit', 'laydate'], function(){ var form = layui.form ,layer = layui.layer ,layedit = layui.layedit ,laydate = layui.laydate; //监听开关操作 form.on('switch(switchTest)', function(data){ layer.msg('是否启用：'+ (this.checked ? '是' : '否'), { offset: '6px' }); // 修改表单项的值 $(data.elem).val(this.checked ? '1' : '0'); }); //监听提交 form.on('submit(formDemo)', function(data){ layer.alert(JSON.stringify(data.field), { title: '最终的提交信息' }) return false; }); }); </script> ``` 其中，form.on('switch(switchTest)', function(data){}) 监听了开关的操作，并且修改了表单项的值。 form.on('submit(formDemo)', function(data){}) 监听了表单的提交操作，将表单的值以 JSON 格式弹出显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值