HTML可编辑的select实现原理还是用select和input伪装成的!

<!DOCTYPE html PUBLIC "-//W3C//Dth XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/Dth/xhtml1-transitional.dth">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript">

    function changeF() {

      document.getElementById('txt').value = document.getElementById('sel').options[document.getElementById('sel').selectedIndex].value;

    }

</script>

</head>

<body>

 <div style="position:relative; width: 240px;height:20px;margin-bottom:10px;margin-left:26px;">

   <select id="sel"  style="float: right; height: 60%;width: 80%; z-index:88; position:absolute; left:10%; top:23%;" onchange="changeF();">

    <option value="0">0</option>

    <option value="0.85">0.85</option>

   </select>

  <input type="text" id="txt" value="" style="position:absolute; width:66%; height:50%; left:11%;top:25%;z-index:99; border:1px #FFF solid" /> 

 </div>

</body>

</html>

HTML可编辑的select的更多相关文章

  1. 可编辑的select框的实现(实用版)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML>  <HEA ...

  2. 如何设置select只读不可编辑且select的值可传递

    1. <select style="width:195px" name="role" id="role" onfocus=" ...

  3. 如何设置select只读不可编辑且select的值可传递（摘自百度）

    selectname="role"id="role"οnfοcus="this.defaultIndex=this.selectedIndex;&qu ...

  4. bootstrap中table页面做省市区级联效果(级联库见前面级联编辑)(非select下拉框)

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. 可编辑select

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. input/select/textarea标签的readonly效果实现

    首先说一下readonly属性的应用场景 表单中,不能编辑对应的文本,但是仍然可以聚焦焦点 在提交表单的时候,该输入项会作为form的一项提交(目的) 这里要说一下disabled和readonly的 ...

  7. select2 下拉搜索 可编辑可搜索 / 只可搜索

    官网 (http://select2.github.io/examples.html) <!--引入select2需要的文件--> <script type="text/j ...

  8. jqgrid动态填充select

    前两天使用jquery动态填充jqgrid的select,默认随便用一个dict填充(初始化页面是会替换掉),用着可以,后来发现当行数增多,回到以前行继续编辑发现select又变成了那个用来避免报错随 ...

  9. HTML_<select>

    1.设置select只读不可编辑且select的值可传递 (1) <select onfocus="this.defaultIndex=this.selectedIndex;" ...

随机推荐

  1. 14.S5PV210串行通信编程实战

    1.整个程序流程分析(1)整个串口通信相关程序包含2部分:uart_init负责初始化串口,uart_putc负责发送一个字节2.串口控制器初始化关键步骤(1)初始化串口的Tx和Rx引脚所对应的GPI ...

  2. 用EXCEL内嵌的Visual Basic for Application 编程，通过 UGSimple USB-GPIB 控制器来驱动仪器34401A，并从34401A读取数据

    现在市场上有很多中USB-GPIB 控制器,或叫 USB 转GPIB链接线. 每种GPIB控制器都有它的 函数库(dll库).各种GPIB 控制器的价钱插别很大.这里以一种价钱较便宜的USB-GPIB ...

  3. 从入门到精通C++需要学的10本书

    学习C++从入门到精通的的十本最经典书籍  文章来源中国IT实验室收集整理作者佚名更新时间2009-5-16 12:27:05 保存本文保存本文推荐给好友推荐给好友收藏本页收藏本页 欢迎进入C/C++ ...

  4. XML语法

    xml文档内容如下:(必须全英文输入,空格都要是英文的!) 1.文档声明 2.元素 3.属性 4.注释 5.CDATA区.特殊字符 6.处理指令 <?xml version="1.0& ...

  5. 如何禁止 Mac OS X 在外接设备上生成 .DS_Store 文件？以及如何批量删除 .DS_Store 文件？

    如何禁止 Mac OS X 在外接设备上生成 .DS_Store 文件?以及如何批量删除 .DS_Store 文件?原文链接:http://www.java2class.net/bbs/viewthr ...

  6. js判断input输入框长度(支持中英文输入)

    function CheckTxtLength(txt) { var num = txt.replace(/[^\x00-\xff]/g, 'xx').length; if (num <=11) ...

  7. Gvim插件管理Vundle

    之前关于gvim的博客中提到的很多插件安装比较繁琐,这一篇来介绍一下gvim管理插件的插件--vundle的安装以及使用,让givm的插件安装更加的简单 首先给出vundle的git地址 https: ...

  8. C# 采用事务批量插入数据

    首先要构建一个实体类,注意实体类的属性和数据的列要一一对应,否则会报错. public class Animal { public string Name { get; set; } public i ...

  9. C6000代码层面优化（一）

    2014年8月7日,看了一片很长见识的博文,关于DSP如何优化的,有一个问题没有搞通,“百度”一下关键字,居然搜查了一模一样的博文N片,现在也搞不懂这篇博文的原创作者是谁了.反正我感觉直接转摘过去,要 ...

  10. LDA（文档主题模型）

    LSA latent semantic analysis 映射词-文档到一个低维隐语义空间 比较词和文档在低纬空间的相似性 topic 是 Vocab 上的概率分布(符合多项式分布) 文档到主题的一个 ...