<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<Script Language="JavaScript">
<!--
var whichText;
function selectStation(obj) {
var objSelStation = obj;
if (obj.selectedIndex != -1) {
var stationName = obj.options[obj.selectedIndex].text;
whichText.value = stationName;
}
}
//响应text的事件
var pageD =0, pageU;
function similarFind(txtObj,seledName) {
var curStationName = txtObj.value;
var objSelStation = eval("document.browser."+seledName);
var stationLength = objSelStation.options.length;
pageU = pageD;
//匹配用text中的数据跟下拉框中的数据
for (var i=0; i<stationLength; i++) {
var stationName = objSelStation.options[i].text;
var re = new RegExp("^" + curStationName);
if (stationName.match(re)) {
if (i<stationLength - 10) {
objSelStation.selectedIndex = i + 10;
}
objSelStation.selectedIndex = i;
pageD = i;
pageU = i;
break;
}
}
//响应下移键
if(event.keyCode==40) {
pageD++;
if(pageD==objSelStation.options.length) pageD=0;
txtObj.value=objSelStation.options[pageD].text ;
objSelStation.selectedIndex = pageD;
}
//响应上移键
if(event.keyCode==38) {
--pageU;
if(pageU<0) pageU=objSelStation.options.length-1;
txtObj.value = objSelStation.options[pageU].text;
objSelStation.selectedIndex = pageU;
}
}
//下拉框显示位置
function showDivStation(obj, b,selName) {
var divStation = eval("document.browser."+selName);
if (b) {
whichText = obj;
divStation.style.top = 20;
divStation.style.left = 0;
divStation.style.display="block";
similarFind(obj,selName);
} else {
divStation.style.display="none";
}
}
//-->
</Script>
<BODY bgcolor="#FFFFFF" topmargin="0" leftmargin="0">
<form name="browser" >
<table border="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
<tr>
<TD width="6%" valign="top">POSTCODE </TD>
<TD width="94%" bgcolor="#FFFFFF">
<input type="text" size="20" name="stationname" style="width:120" onfocus="showDivStation(this, true,'selStation')" onblur="showDivStation(this, false,'selStation')" onkeyup="similarFind(this,'selStation')" value="">
<select name="selStation" size="5" style="display:none;width:120; background-color:#CCCC99" onclick="selectStation(this)" onkeyup="selectStation(this)">
<option value="1" >aaa</option>
<option value="2" >aab</option>
<option value="3" >aac</option>
<option value="4" >aba</option>
<option value="5" >abb</option>
<option value="6" >abc</option>
<option value="7" >baa</option>
<option value="8" >bab</option>
<option value="9" >bac</option>
<option value="10" >caa</option>
<option value="11" >cab</option>
<option value="12" >cac</option>
</select>
</td>
</table>
</form>
</BODY>
</HTML>
分享到：
相关推荐
在网页开发中，JavaScript（JS）经常用于增强用户体验，其中之一就是实现日期选择器。日期选择器通常用于文本框，允许用户方便地选择日期，而无需手动输入，这大大提高了输入的准确性和效率。本篇文章将深入探讨如何...
在JavaScript（JS）中，日期选择器是一种常见且实用的功能，尤其在开发Web应用程序时，如日历插件、表单验证或事件预订系统等。H5（HTML5）技术的普及使得在浏览器环境中实现这样的功能变得更加简单。下面将详细讨论...
这种设计可以为用户提供更灵活的选择方式，既可以快速从预设选项中选取，也可以手动输入自定义内容。在描述的场景中，开发人员可能需要在特定页面上实现这种功能，以满足用户既能从预设的选项中进行选择，也能在没有...
在实际的Web开发中，我们经常需要用户输入精确到秒的时间信息，这时就需要对DateTimePicker进行配置，使其支持秒的选择。以下是对"bootstrap datetimepicker 设置秒可以选择"这一主题的详细解释。 首先，Bootstrap ...
Calendar JS是一款在前端开发中广泛应用的日期选择插件，它以其用户友好、功能丰富和高度可定制性而受到开发者的喜爱。这个插件能够帮助开发者轻松地在网页中实现日期选择功能，适用于各种场景，如日历视图、事件...
而WUI-DatePicker是一款基于Angular.js开发的日期选择器插件，专为提高用户体验而设计，提供了多种选择模式，包括年月日、年月、时分、时分秒等，甚至可以选择至今的日期范围。在本文中，我们将深入探讨这款插件的...
通过在`<select>`标签上添加`autocomplete="off"`，我们可以确保浏览器不会记住之前的输入，进而使得`selected="selected"`属性能够正确地控制预选中的选项。 此外，还需要注意其他可能导致`selected="selected"`...
在JavaScript（简称JS）编程中，日历选择功能是一个常见的用户界面组件，广泛应用于各种Web应用，如在线预订系统、事件计划或者表单输入等。本篇将详细讲解如何使用JavaScript来实现一个基本的日历选择器。 首先，...
`datePicker.js`是一款适用于移动端和PC端的时间选择器组件，它为用户界面提供了一种交互式的日期和时间选择功能。在网页应用中，时间选择器是必不可少的元素，尤其在处理表单输入或者需要用户指定特定日期或时间的...
jQuery颜色选择器插件jColor.js是一款专门为网页开发者设计的工具，它允许用户在网页上实现交互式颜色选择功能。这个插件基于流行的JavaScript库jQuery，使得颜色选择过程变得更加直观和用户友好。在网页设计中，...
Vue.js 是一款轻量级的前端 JavaScript 框架，以其易用性和可扩展性而备受开发者喜爱。在 Vue 应用中，我们经常需要实现输入框的自动完成功能，以便用户可以更快捷地找到他们想要输入的内容。这就是 `v-autocomplete...
在IT领域，"Retrieving selected items找回选择的项的内容"这一主题主要涉及到数据操作和用户交互，特别是针对用户在应用程序中进行的选择操作。这通常发生在各种类型的应用程序中，如文件管理器、数据库应用或者...
这可以通过设置省份选择器的`selected`属性实现。 ```javascript document.getElementById('province').selectedIndex = 0; // 设置默认省份 ``` 6. **优化**： - 为了提供更好的用户体验，可以添加一些额外的...
console.log('Selected:', selected.province, selected.city, selected.district); } }); }); ``` 在实际项目中，你可以根据需要调整数据源和配置，以适应不同的设计风格和功能需求。此外，`Mobiscroll` 提供了...
在JavaScript编程中，文本框（TextBox）是网页交互中常用的一种元素，用户可以在其中输入文本。有时，开发者需要获取或操作文本框中的焦点光标位置、选中起始位置、终止位置以及选中的内容，这对于实现诸如高亮显示...
"JS的日期输入框，可以直接使用"这个标题暗示了我们有一个简单的解决方案，可能是通过原生的JavaScript API或者是第三方库来实现日期选择的功能。让我们深入探讨一下如何在JavaScript中处理日期输入。 在JavaScript...
Typeahead插件还支持自定义事件处理和方法调用，例如，你可以监听`typeahead:selected`事件来执行特定操作，或者调用`typeahead('lookup')`来手动触发查询。 ### 注意事项 - 考虑到性能，避免在大数据集上使用...
在您提供的资源"Vue.js的通用选择多选标记组件_JavaScript_HTML_下载.zip"中，我们可以推测包含了一个名为"vue-multiselect-master"的项目。`vue-multiselect`是Vue.js的一个插件，它提供了一个高度可定制的多选下拉...
1. **仿能输入的下拉框**：`selectBox`将原生的下拉框转换为一个可输入的文本框，允许用户通过输入关键词快速定位选项，提升选择效率。 2. **搜索与自动完成**：该插件内置了搜索功能，当用户在输入框中输入时，会...
3. **JavaScript交互**：监听用户的触摸或点击事件，当用户触碰某个输入框时，显示数字键盘（可以使用自定义键盘或者系统键盘），并记录输入的数字。同时，更新对应的格子状态。 ```javascript let password = ''; ...