`
- 浏览:
67902 次
- 性别:
- 来自:
北京
-
页面设计时，在实际应用中我们常常要用到输入框、下拉选择框等控件；但有时候为了满足特别的要求我们会用到可选可输入的“下拉选择输入框”，设计源码如下：
<html>
<head>
</style>
</head>
<body>
<h1>测试可选可输入文本框<br><br><br></h1>
<tr>
<td>请输入或直接选择</td>
<td align="center"style="border-left: 1px #CCCCCC solid; border-right: 1px #CCCCCC solid;border-bottom: 1px #CCCCCC solid;">
<div style="position:relative;left:200px;top:-15px;">
<span style="margin-left:132px;width:30px;overflow:hidden;position:absolute;left:10px;top:0px">
<select style="width:150px;margin-left:-132px" onchange="this.parentNode.nextSibling.value=this.value">
<option value="15110103">15110103</option>
<option value="15110102">15110102</option>
</select>
</span>
<input name="accC1" value="15110103" style="width:132px;position:absolute;left:10px;top:0px;">
</div>
</td>
</tr>
<!-- 可选可输入控件是有 input和select拼起来的组合控件，并不是真正意义上的单一可选可输入控件，只是在视觉效果和性能上完全满足要求-->
<!--依次解释控件中参数的意义：-->
<!-- 1、div中的style参数中position属性，由它来决定组合控件的位置-->
<!-- 2、span中的style参数中 margin-left:132px为显示选择框左边显示数据部分预留的宽度，width:18px为倒三角号显示预留的宽度-->
<!-- 3、select中的style参数中 width:150px为下拉选择框的宽度，位置：position:absolute-->
<!-- 4、input中的style参数中 width:132px为文本输入框的宽度，位置：position:absolute-->
<!-- 5、文本输入框的宽度等于下拉选择框的倒三角号左边部分，位置与选择框正好重合，盖住了选择框的左边部分，从而实现了可选可输入文本框的效果-->
</body>
</html>
分享到：
相关推荐
纯js日历，只要在页面调用就可以实现日历输入文本框，日历选择有年份，月份，日期，可选部分有小时，分钟，秒。可以直接选择当日日期
翻译助手插件插件名翻译助手 TranslateHelper用途在常见的网页翻译网页（百度翻译、谷歌翻译、有道翻译、必应翻译、搜狗翻译）的页面上，提供如下方便实用小功能：点击“格式化”按钮，可自动去除待翻译文本中的换行...
01082在单元格中输入数字和文本 01083为输入对话框设置默认值 01084在指定时间运行程序（之一） 01085在指定时间运行程序（之二） 01086计划在未来运行一定时间的宏 01087计划每隔一段时间运行宏 01088取消以前计划...
40. 把复选框中选中的值直接显示在输入文本框中？ 41. 选择路径下的文件直接显示文件内容? 42. 制作进度条? 43. 对较长字符省略显示? 44. 制作日历? 45. 点击文本弹出一个选择框，选中值后返回并显示 46. 关闭框架...
3.2 限定文本框可输入字符数 3.3 文字过长的省略号 3.4 输出26个英文字母 3.5 首字母变为大写 3.6 textarea自适应文字行数 3.7 禁止文本框的拷贝和粘贴 3.8 控制两个文本框只输其一 3.9 判断编辑器中是否包含特殊...
3.2 限定文本框可输入字符数 3.3 文字过长的省略号 3.4 输出26个英文字母 3.5 首字母变为大写 3.6 textarea自适应文字行数 3.7 禁止文本框的拷贝和粘贴 3.8 控制两个文本框只输其一 3.9 判断编辑器中是否包含特殊...
10.11 实现可折叠的输入表单 10.12 实现手风琴样式的折叠面板 10.13 使用网格打造简单的九宫格界面 10.14 可动态隐藏的页眉和页脚 10.15 最简单的手机相册 10.16 在列表框上添加气泡提示 10.17 在列表框上添加自定义...
文本框 文本域 UBB文本框（支持UBB文本输入） 密码框 隐藏域 日期选择 单选框 复选框 下拉框 多选列表 单选列表 批量上载 上载文件 上载到库 07、支持多种信息显示方式： 显示文字 链接文件 文本框 文本域 显示...
文本框 文本域 UBB文本框（支持UBB文本输入） 密码框 隐藏域 日期选择 单选框 复选框 下拉框 多选列表 单选列表 批量上载 上载文件 上载到库 07、支持多种信息显示方式： 显示文字 前20字符 UBB文本 链接文件 ...
文本框 文本域 UBB文本框（支持UBB文本输入） 密码框 隐藏域 日期选择 单选框 复选框 下拉框 多选列表 单选列表 批量上载 上载文件 上载到库 07、支持多种信息显示方式： 显示文字 链接文件 文本框 文本域 显示...
把复选框中选中的值直接显示在输入文本框中？ 41. 选择路径下的文件直接显示文件内容? 42. 制作进度条? 43. 对较长字符省略显示? 44. 制作日历? 45. 点击文本弹出一个选择框，选中值后返回并显示...
文本框 文本域 UBB文本框（支持UBB文本输入） 密码框 隐藏域 日期选择 单选框 复选框 下拉框 多选列表 单选列表 批量上载 上载文件 上载到库 07、支持多种信息显示方式： 显示文字 链接文件 文本框 文本域 显示图片...
可编辑域（文本框）： 把光标移到输入域中，由键盘直接键入数据； 下拉式列表框： 由下拉列表选择输入法录入，即： 键盘操作：用Tab键将光标移到该域，按箭头键打开下拉列表；再用箭头键移动光标选定列表...
文本框 文本域 UBB文本框（支持UBB文本输入） 密码框 隐藏域 日期选择 单选框 复选框 下拉框 多选列表 单选列表 批量上载 上载文件 上载到库 07、支持多种信息显示方式： 显示文字 链接文件 文本框 文本域 显示...
文本框 文本域 UBB文本框（支持UBB文本输入） 密码框 隐藏域 日期选择 单选框 复选框 下拉框 多选列表 单选列表 批量上载 上载文件 上载到库 07、支持多种信息显示方式： 显示文字 链接文件 文本框 文本域 显示...
102 <br>0162 如何实现C#中用键完成TAB的功能 102 <br>0163 如何限制文本框密码输入长度 102 <br>0164 数据输入为空提示 103 <br>0165 如何设置文本框光标到末尾 103 <br>0166 输入法调整...
文本框 文本域 UBB文本框（支持UBB文本输入） 密码框 隐藏域 日期选择 单选框 复选框 下拉框 多选列表 单选列表 批量上载 上载文件 上载到库 07、支持多种信息显示方式： 显示文字 链接文件 文本框 文本域 显示...
只需要在绘图工具栏上选择文本框(竖排或横排均可)，然后在表格上拖出一个文本框，在其中输入文字，再在表格上单击鼠标右键，在弹出菜单中选择“设置文本框格式”，再单击“颜色与线条”标签，把“填充”颜色及“线条...
ajaxmodel.war Ajax实例应用的项目文件（可直接在Tomcat中发布运行）。 \ajaxmodel\amel\html\firstAjax.jsp 显示XMLHttpRequest对象状态。 \ajaxmodel\amel\html\userReg.html 完成验证的客户端页面。...
我们稍后使用的 HTML 表单包含多种输入字段：必需和可选的文本字段、单选按钮以及提交按钮： 上面的表单使用如下验证规则： 字段 验证规则 Name 必需。必须包含字母和空格。 E-mail 必需。必须包含有效的...