`
- 浏览:
68730 次
- 性别:
- 来自:
北京
-
页面设计时，在实际应用中我们常常要用到输入框、下拉选择框等控件；但有时候为了满足特别的要求我们会用到可选可输入的“下拉选择输入框”，设计源码如下：
<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>
分享到：
相关推荐
`options`是一个可选的配置对象，用来传递参数到插件。 针对"文本框输入限制汉字和字母"的需求，我们可以创建一个名为`inputLimit`的插件。这个插件会监听文本框的`keyup`事件，检查用户输入的字符是否符合规定。...
在这个例子中，用户可以在文本框中输入，而下拉列表会根据已输入的内容动态过滤出匹配的选项。 **HTML5的增强功能** HTML5的`<input>`元素新增了`list`属性，它与`<datalist>`的`id`属性相对应，将输入框与下拉...
开发者可以通过查看和学习这些文件，了解具体的实现细节和技巧，以便在自己的项目中应用或改进这种可输入可选择的下拉框控件。 总之，"asp.net可输入可选择下拉框"是一种增强用户体验的设计，它通过结合传统的...
在Web开发中，我们经常需要创建可输入、可搜索、可选择的下拉框，以提供用户友好的交互体验。layui 提供了 `layui-select` 组件来实现这样的功能，它允许用户在输入框中输入关键字，同时在下拉列表中进行搜索，找到...
网页中的文本框时间控件是一种常见且实用的交互元素，常用于在线表单或日程管理等场景。这种控件允许用户通过一个直观的日历界面来选择日期或时间，而不是手动输入，从而提高了数据输入的准确性和效率。本文将深入...
3. 可选地，根据用户交互动态改变标签的显示状态，如通过`.focus()`和`.blur()`事件。 4. 结合CSS样式调整标签的视觉效果。 在提供的压缩包文件"texiao6494_1560681027"中，可能包含了相关的示例代码或者完整的项目...
标题 "C#输入框可选可输入" 描述了一个功能丰富的UI组件，它结合了文本输入和下拉选择两种交互方式。这样的设计提高了用户在页面...文件名"输入框可选可输入"可能包含实现这一功能的代码示例或资源，供开发者参考学习。
当我们需要在网页上实现一个可多选的文本框时，jQuery提供了丰富的功能和插件来帮助我们完成这一需求。本文将深入探讨如何使用jQuery创建和管理多选文本框，以及相关的知识点。 首先，让我们明确什么是多选文本框。...
用户在输入城市信息时，可以通过点击文本框触发一个下拉菜单，展示可选的城市列表，从而快速选择。 首先，我们需要了解jQuery的基本用法。jQuery的核心是选择器，它们允许我们高效地定位DOM元素。例如，`$("#id")`...
HTML控件是构建网页交互界面的基础，用于收集用户输入数据和提供用户操作界面。...在注册与登录页面的实现中，熟练掌握各种控件的使用，结合服务器端脚本处理用户输入，能够构建出完整的用户认证系统。
- 在菜单栏中选择“插入”->“文本框”（可选横排或竖排文本框）；或者在绘图工具栏中单击“文本框”按钮。 - 拖动鼠标绘制出所需的文本框。 2. **调整文本框位置与大小**： - 单击文本框边框，当鼠标变为“十字...
1. 在HTML中创建文本框，并可选地设置`placeholder`属性。 2. 引入jQuery库和`JqWatermark.js`插件。 3. 使用`.ready()`函数确保DOM加载完成后再执行代码。 4. 使用`JqWatermark.js`插件的`watermark`方法为文本框...
用户选择日期后，所选日期会自动填充到文本框中，显示的日期格式遵循`dateFormat`设置。 除了基本的配置，jquery.datePicker还提供了许多可自定义的选项，如改变日期选择器的样式、设置默认日期、禁用特定日期等。...
autocomplete插件实现了可编辑可输入文字模糊匹配下拉选项，适用于下拉选项比较多的情况下使用，快速搜索并定位下拉项
在JavaScript中，我们可以使用事件监听器来捕获用户在文本框中的输入行为，然后通过正则表达式检查输入是否符合数字或浮点数的格式。例如，一个基本的实现方式可以这样： ```javascript document.getElementById('...
本文将详细探讨“精美表单样式”中的关键元素：下拉菜单、文本框和复选框，以及如何利用这些元素创建高效且吸引人的网页表单。 首先，下拉菜单是一种节省空间且用户友好的交互方式，常用于提供多个选项供用户选择。...
本项目中的“JSP编写的万年历”是一个实用的Web应用程序，它能够为用户提供一个交互式的日历功能，满足在文本框中显示或选择日期的需求。万年历的设计通常是为了方便用户查看和选择日期，而这个JSP实现的版本不仅...
在描述中提到的源码，很可能是当用户触发某个事件（如点击按钮）时，通过AJAX发送请求到服务器，获取需要的文本框和复选框数量或数据，然后使用JavaScript动态创建这些元素并插入到页面的特定位置。 值得注意的是，...
4. **CSS动画**：可选地，为提示列表的显示和隐藏添加一些过渡效果，提高用户体验。 ```css #email-suggestions { transition: all 0.3s ease-in-out; } .highlight { background-color: #f0f0f0; } ``` 以上...
- 使用`element.selectionStart`属性，它可以返回光标在文本框中的位置。例如，`$("#myTextBox").prop("selectionStart")`将返回光标当前的位置。 2. **设置光标位置**： - 使用`element.setSelectionRange(start...