Html的Select加一个输入的方法

最新推荐文章于 2021-06-03 20:04:16 发布
最新推荐文章于 2021-06-03 20:04:16 发布
阅读量80 收藏
点赞数
分类专栏： JavaScript 文章标签： HTML JavaScript .net Blog ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lishushan/article/details/83529152
版权 
<Html>
<Head>
<SCRIPT LANGUAGE="JavaScript">
<!--
//定义 select 原值
var oldValue,oldText;
//select下拉框的onkeydown事件，修改下拉框的值
function catch_keydown(sel){
   switch(event.keyCode) {
    case 13: //回车键
     event.returnValue = false;
     break;
    case 27: //Esc键
     sel.options[sel.selectedIndex].text = oldText;
     sel.options[sel.selectedIndex].value = oldValue;
     event.returnValue = false;
     break;
    case 8: //空格健
     var s = sel.options[sel.selectedIndex].text;
     s = s.substr(0,s.length-1);
     if (sel.options[0].value==sel.options[sel.selectedIndex].text){
      sel.options[sel.selectedIndex].value=s;
      sel.options[sel.selectedIndex].text=s;
     }
     event.returnValue = false;
     break;
   }
   if (!event.returnValue && sel.onchange)
    sel.onchange(sel)
}

//select下拉框的onkeypress事件，修改下拉框的值
function catch_press(sel){
   if(sel.selectedIndex>=0){
    var s = sel.options[sel.selectedIndex].text + String.fromCharCode(event.keyCode);
    if (sel.options[sel.selectedIndex].value==sel.options[sel.selectedIndex].text){
     sel.options[sel.selectedIndex].value=s;
     sel.options[sel.selectedIndex].text=s;
    }
    event.returnValue = false;
    if (!event.returnValue && sel.onchange)
     sel.onchange(sel)
   }
}

//select下拉框的onfocus事件，保存下拉框原来的值
function catch_focus(sel) {
   oldText = sel.options[sel.selectedIndex].value;
   oldValue = sel.options[sel.selectedIndex].value;
}   
//-->
</SCRIPT>
</Head>
<Body>
<!--调用-->
<select style='width:130px;z-index:-1' name='tmpSel'    οnkeydοwn=catch_keydown(this) οnkeypress=catch_press(this) οnfοcus=catch_focus(this)>
<option value=''></option>
<option value=''>A</option>
<option value=''>B</option>
<option value=''>C</option>
</select>
</Body>
</Html>

 

带有提示信息的

xieyj（原作）

<Html>
<Head>
<SCRIPT LANGUAGE="JavaScript">
<!--
//定义 select 原值
var oldValue,oldText;
//select下拉框的onkeydown事件，修改下拉框的值
function catch_keydown(sel){
   switch(event.keyCode) {
    case 13: //回车键
     event.returnValue = false;
     break;
    case 27: //Esc键
     sel.options[sel.selectedIndex].text = oldText;
     sel.options[sel.selectedIndex].value = oldValue;
     event.returnValue = false;
     break;
    case 8: //空格健
     var s = sel.options[sel.selectedIndex].text;
     s = s.substr(0,s.length-1);
     if (sel.options[sel.selectedIndex].value==sel.options[sel.selectedIndex].text){
      sel.options[sel.selectedIndex].value=s;
      sel.options[sel.selectedIndex].text=s;
     }
     event.returnValue = false;
     break;
   }
   if (!event.returnValue && sel.onchange)
    sel.onchange(sel)
}

//select下拉框的onkeypress事件，修改下拉框的值
function catch_press(sel){
   if(sel.selectedIndex>=0){
    var s = sel.options[sel.selectedIndex].text + String.fromCharCode(event.keyCode);
    if (sel.options[sel.selectedIndex].value==sel.options[sel.selectedIndex].text){
     sel.options[sel.selectedIndex].value=s;
     sel.options[sel.selectedIndex].text=s;
    }
    event.returnValue = false;
    if (!event.returnValue && sel.onchange)
     sel.onchange(sel)
   }
}

//select下拉框的onfocus事件，保存下拉框原来的值
function catch_focus(sel) {
   oldText = sel.options[sel.selectedIndex].value;
   oldValue = sel.options[sel.selectedIndex].value;
}

//select 选择框鼠标上移时提示选择的内容
function selMouseOver(obj){
   with (document.all.div_hint){
   innerText = obj.options[obj.selectedIndex].text;
   if (innerText.length > 0){
    innerText = " " + innerText + " ";
    style.display = "block";
    style.left = event.clientX + 16;
    style.top = event.clientY;
    }
   }
}
//select 选择框鼠标移开时消失
function selMouseOut(obj){
   with (document.all.div_hint){
    style.display = "none"
   }
}
//-->
</SCRIPT>
</Head>
<Body>
<!--调用-->
<select style='width:130px;z-index:-1' name='tmpSel' οnmοuseοver=selMouseOver(this) οnmοuseοut=selMouseOut(this) οnkeydοwn=catch_keydown(this) οnkeypress=catch_press(this) οnfοcus=catch_focus(this)>
   <option value=''></option>
</select>

<!--提示块-->
<div id=div_hint style="font-size:12px;color:red;display:none;position:absolute; z-index:2; top:200;background-color: #F7F7F7; layer-background-color: #0099FF; border: 1px #9c9c9c solid;filter:Alpha(style=0,opacity=80,finishOpacity=100);"></div>

</Body>
</Html>

 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/zwhfyy/archive/2009/05/21/4205515.aspx

lishushan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
为 Html 的 Select 加一个提示语和输入方法
高级多宝平台编程序员 的专栏
04-22 825
//定义 select 原值  var oldValue,oldText;  //select下拉框的onkeydown事件，修改下拉框的值  function catch_keydown(sel)  {  switch(event.keyCode)  {  case 13: //回车键  event.returnValue = false;  break;  case 27:
在html里面给input，select处理数据
ingenuou_的博客
08-31 628
在html里面给input，select处理数据
html 下拉框设置提示语,为 Html 的 Select 加一个提示语和输入方法
weixin_42551260的博客
06-03 1750
//定义 select 原值var oldValue,oldText;//select下拉框的onkeydown事件，修改下拉框的值function catch_keydown(sel){switch(event.keyCode){case 13: //回车键event.returnValue = false;break;case 27: //Esc键sel.options[sel.selecte...
为Html的Select加一个输入的方法
alan3258的专栏
05-27 515
xieyj（原作）       //定义 select 原值  var oldValue,oldText;  //select下拉框的onkeydown事件，修改下拉框的值  function catch_keydown(sel){   switch(event.keyCode) {    case 13: //回车键     event.returnValue = false;     
select 增加搜索框
09-18
标题“select增加搜索框”和描述中提到的“在select框中添加新的样式searchClass”，正是针对这个需求的一种解决方案。 要实现带有搜索功能的`select`框，一种常见的方法是使用第三方库，例如`Chosen`插件。`Chosen...
select模糊查询
02-04
在网页设计和开发中，`...总之，`select`模糊查询是提高交互体验的重要技术，`chosen`库提供了一种简洁有效的方法来实现这一功能。开发者可以根据项目需求，灵活配置和扩展`chosen`，以实现更丰富的功能和定制化界面。
进行模糊查询+多选功能的下拉框（select） 模糊加载
05-26
总的来说，"进行模糊查询+多选功能的下拉框（select） 模糊加载"是一个实用的前端开发技术，通过扩展标准的HTML组件，提升了用户在交互过程中的体验。开发者可以依据这个实现进行二次开发，以适应特定项目的需要。...
HTML标签速查表.pdf
05-10
- `<select>`：创建下拉列表。 - `<optgroup>`：在下拉列表中创建分组。 - `<option>`：在下拉列表中定义选项。 - `<label>`：为表单元素提供描述性文本。 - `<fieldset>`：用于组织表单中的元素。 - `...
html学习【（案例）用文本编辑器打开能看到知识点】包括表格表单等
10-19
锚点还可以用于页面内部跳转，通过`#`加一个ID名，可以跳转到页面内具有相同ID的元素位置。 4. **`input`元素**：`input`元素是表单中最灵活的，它的`type`属性决定了它的表现形式。例如，`type="text"`用于文本...
Javascript 方法大全
JavaEE架构与开发
01-13 1089
方法大全" href="http://www.itpig.cn/?p=41" rel=bookmark&gt;Javascrīpt 方法大全 1 创建脚本块 1: &lt;scrīpt language=”Javascrīpt”&gt;S z g%` L02: Javascrīpt code goes here^ \ ~ [8n%x9p n P03: &lt;/scrīpt&gt; 2 隐藏...
javascript(Js)如何隐藏表格(Table)的行或列？
JavaEE架构与开发
01-13 757
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; &lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt; 显示隐藏列 &lt;/TITLE&gt; &lt;SCRIPT LANGUAGE="JavaScript"&gt; &lt;!-- fun
javascript中获取radio的值
JavaEE架构与开发
01-13 672
Radio 是 HTML 中的单选框，同一个 form 中，name 相同的 Radio 构成一组，这一组中最多只允许有一个 Radio 被选中。 如果将 form 提交到服务器端 ASP 程序，ASP 程序要获得用户选择的那个 Radio 的 value 是非常方便的，用 request.Form("RadioName")，不必理会有几个 Radio。 但在 JS(JavaScript) 中...
一款可以用来实现网页拖拽得HTML代码
JavaEE架构与开发
01-13 631
&lt;style&gt; .dragTable { border-top: 1px solid #3366cc; margin-bottom: 10px; width: 100%; background-color: #FFFFFF; } td { vertical-align: top; } .dragTR { cursor: move; color: #7787cc; text-...
JavaScript 生成曲线图
JavaEE架构与开发
05-10 605
引用方法 new gov.Graphic(par1,par2,par3); par1 为绘图数据，比如： var data=new period([0,10,22,13,34,25,28,26,30,35,28,34,39,28,26,50,35,28,34,39,55],//y轴数据[188,189,190,191,192,193,194,195,196,197,198,199,200...
重写window.confirm函数
JavaEE架构与开发
06-12 462
重写window.confirm函数为了让它能够默认选择取消按钮。 javascript中window.confirm这个方法很好用，可以弹出一个确认对话框。   但有一个问题是，它默认的情况下，将选中那个"确定"按钮，当用户有意无意的在键盘回车，就是说按下Enter键的时候，就会自动返回true。在很多时候其实我们不希望这样。 我们之所以弹出这个对话框，可能就是因为该操作很危险，所以要用...
点击表格中某一行中的某个单元格中的超链接/按钮，如何获取当前行号？
JavaEE架构与开发
01-20 455
我用html做了一个表格，表格的特点如下： 表格的行代表一个对象，表格的列代表对象的某个属性； 表格第一列是用超链接表示的，表示对象的名称； 我想实现的效果是：点击名称那一列的某个超链接，获取超链接所在的那一行数据进行处理。我的想法是，点击超链接，获取到所在表格的行号，然后就可以对这一行每个单元格进行操作了。现在的问题是，该如何获取超链接所在的行号？   &lt;script language...
javascript中如何获取表格中的当前行号
JavaEE架构与开发
01-20 430
&lt;table width="100%" border="1"&gt; &lt;tr onclick=alert(this.rowIndex)&gt; &lt;td&gt;&amp;nbsp; &lt;/td&gt; &lt;/tr&gt; &lt;tr onclick=alert(this.rowIndex)&gt;
使用 JavaScript 获取 table 行号和列号
JavaEE架构与开发
01-20 296
　　怎样获取预定义的table的行号和列号呢？很简单，只需要了解table的几个属性值用法即可。Table的总行数可以通过标记“tr”得到，但是table的列数却不能直接获取，它需要借助rows通过标记“th”和“td”得到。　　为了更直观，下面以示例来说明如何得到行号和列号。点击Id为'MyTable'的表格的任意单元时，返回该单元的行号和列号！示例代码如下： function getRowA...
html标签select变化执行的方法
最新发布
05-17
当 `<select>` 元素的选项发生变化时，可以通过绑定 `onchange` 事件来执行相应的方法。...在这个例子中，当用户选择不同的选项时，`myFunction()` 方法会被调用，你可以在这个方法中执行你想要的操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值