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. 【转】Java集合类

    http://blog.csdn.net/zhangerqing/article/details/8122075 http://android.blog.51cto.com/268543/400557 ...

  2. html5 定位 获得当前位置的经纬度

    if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition, showError, { // ...

  3. python绘图中使用公式时，解决\frac{}{}出来的字体太小的问题

    在用matplotlib绘图需要在图片中加入公式时,一般要用 text 或 annotate函数,并结合latex语法 '$...$'. 对于分数,如果直接使用\frac{}{},会造成分子分母上的字 ...

  4. 端到端 vs 点到点

    比较(转自 百度经验) 端到端与点到点是针对网络中传输的两端设备间的关系而言的.端到端传输指的是在数据传输前,经过各种各样的交换设备,在两端设备问建立一条链路,就僚它们是直接相连的一样,链路建立后,发 ...

  5. xml ---DOM操作

    package day03.xml; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; ...

  6. Tomcat并发数优化，修改service.xml性能调优 增加最大并发连接数

    可以在控制台的启动信息里看见,默认状态下没有被打开nio配置,启动时的信息,如下: 2010-2-1 12:59:40 org.apache.coyote.http11.Http11Protocol ...

  7. Java Daemon 守护线程

    Java中可以通过Thread或ThreadGroup的setDaemon方法将线程设置为守护线程 当所有非守护线程退出后 守护线程将被杀死不在运行 .Net中可以通过设置IsBackground属性 ...

  8. Winform 窗体单例

    有窗体Form1和窗体Form2,单击Form1上按钮,只弹出一个Form2. Form2里自定义一个方法,里面判断是否弹出Form2,没有时弹出Form2. public static Form2 ...

  9. Sublime Text 3 配置Java开发

    Sublime Text 3 配置Java开发 内嵌模式 在Sublime内部输出面板显示执行过程 配置JavaC - INSET.sublime-build 打开Sublime的包目录(选择菜单:P ...

  10. web初学之request，session与application

    request (1)request的setAttribute()与getAttribute()方法一般都是成对出现,首先通过setAttribute()方法设置属性与属性值,然后通过getAttri ...