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. Hive的安装

    Hive的安装   第一步:解压并安装:第二步:配置 1)root用户下,解压后,改名为hive,并将hive文件夹赋给hadoop用户 tar -zxvf hive-0.9.0.tar.gz -C ...

  2. linux下dos环境和unix环境转换

    DOS转UNIX::setfileformat=unix UNIX转DOS::setfileformat=dos and :set ff=unix

  3. Linux Shell ---系统命令（1）

    date命令 功能说明:显示或设置系统时间与日期. 语 法: date [-d <字符串>][-u][+%H%I%K%l%M%P%r%s%S%T%X%Z%a%A%b%B%c%d%D%j%m ...

  4. XidianOJ 1063 Chemistry Problem

    [提交][状态][讨论版] 题目描述 lw最近正在学习立体化学.立体化学中常用Fischer投影式表示分子的立体构型,例如,对于酒石酸HOOC(CHOH)2COOH,如果用一根横线表示羟基,略去氢原子 ...

  5. prolog 阶段总结

    http://blog.csdn.net/mwsong/article/details/1766382   到现在为止,我们已经对Prolog有了一个基本的了解,现在有必要对我们所学过的知识做一个系统 ...

  6. HTTPS 和 HTTP

    https://www.zhihu.com/question/52790301

  7. 使用ping钥匙临时开启SSH:22端口，实现远程安全SSH登录管理就这么简单

    设置防火墙策略时,关于SSH:22访问权限,我们常常会设置服务器只接受某个固定IP(如公司IP)访问,但是当我们出差或在家情况需要登录服务器怎么办呢? 常用两种解决方案:1.通过VPN操作登录主机: ...

  8. SQL Server执行计划的理解

    详细看:http://www.cnblogs.com/kissdodog/p/3160560.html 自己总结: 扫描Scan:逐行遍历数据. 查找Seek:根据查询条件,定位到索引的局部位置,然后 ...

  9. 转载：java程序打包成jar 配置文件信息路径

    一个普通的java project,里面引用了config.properties配置文件,将项目打成Runnable jar,然后将config.properties放到打包后的jar路径下,执行该j ...

  10. kendoTreeView，需要注意的地方

    今天使用了下kendoUI中的TreeView控件,一开始的时候总是不成功, 总是会报 Uncaught TypeError: Cannot read property 'toLowerCase' o ...