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. 移动端自动化环境搭建-stuptools和pip的安装

    安装stuptools和pip A.安装依赖 setuptools 和 pip 并非必须安装的两个包,但安装之后,后续再安装 Python 的库将变得非常简单. B.安装过程

  2. Tomcat 实现双向SSL认证

    大概思路: 使用openssl生产CA证书,使用keytool生产密钥库 实验环境:RHEL6.4+Tomcat8 一.生成CA根证书,并自签名 1.生成CA密钥 # genrsa [产生密钥命令] ...

  3. 照片元数据信息以及在照片中写入gps信息

    /// 照片元数据编码 在下面的文章里,可以看到图片所有的元数据定义信息 https://msdn.microsoft.com/zh-cn/library/system.drawing.imaging ...

  4. Redis从基础命令到实战之列表类型(List)

    经过上一篇基于Redis散列类型的改造后,实战练习中的商品管理已经具备了增加.修改整体.修改部分属性和分页查询功能,但仍然不支持删除商品的功能.这是因为商品总数是以一个自增数字记录的,且关联了新商品k ...

  5. windows下手动安装和配置xamarin

    安装xamarin xamarin官方给出了两种安装方式,自动安装和手动安装. 自动安装比较简单,到http://xamarin.com/download下载xamarininstaller.exe ...

  6. NGUI缓动函数

    缓动函数:http://easings.net/zh-cn 研究NGUI的博客:http://dsqiu.iteye.com/category/295721

  7. (转)UIWebView全部API学习

    网上找的收藏一下 http://www.myexception.cn/web/1888974.html 最生僻的API做了下划线以及粗体的标注.百度上查了全是拷贝的同一份代码,而且只有代码没有解释,很 ...

  8. spring-mybatis jar下载地址

    http://central.maven.org/maven2/org/mybatis/mybatis-spring/1.3.0/

  9. ubuntu 双线双网卡双IP实现方式

    昨天金桥机房上架了一台多玩的测试机,系统是ubuntu9.04 X64的系统,母机IBM X336机器.用户需求是双线,故采用一个网卡配置电信地址,另一个网卡配置联通地址,安装好系统后配置好IP发现联 ...

  10. Linux性能工具介绍

    l  Linux性能工具介绍 p  CPU高 p  磁盘I/O p  网络 p  内存 p  应用程序跟踪 l  操作系统与应用程序的关系比喻为“唇亡齿寒”一点不为过 l  应用程序的性能问题/功能问 ...