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. 用PHP向mysql添加数据

    <?php $name=$_POST['name']; $gender = $_POST['gender']; $age=$_POST['age']; #连接到数据库 $link = mysql ...

  2. 这是个简单的UTF8转码的小Demo

    NSString *name = @"你好啊"; NSString *string = [NSString stringWithFormat:@"%@",nam ...

  3. Winform DataGridView控件添加行号

      有很多种方法,这里介绍三种: A: 控件的RowStateChanged事件中添加,RowStateChanged事件是在行的状态更改(例如,失去或获得输入焦点)时发生的事件: e.Row.Hea ...

  4. http协议get、post请求分析及用HttpRequester测试的报错及可能原因

    1.get.post区别 Get Post 获取/提交数据 主要获取数据,不修改数据 主要提交数据,可修改数据 是否需要form表单 不一定 需要 安全性 查询字符串会显示在地址栏的URL中,不安全. ...

  5. {ICIP2014}{收录论文列表}

    This article come from HEREARS-L1: Learning Tuesday 10:30–12:30; Oral Session; Room: Leonard de Vinc ...

  6. (转)IC验证概述

    验证是确保设计和预定的设计期望一致的过程,设计期望通常是通过设计规范来定义的.对于芯片设计,在不同的阶段可以分为:寄存器传输级(RTL)的功能验证.门级的仿真验证.形式验证以及时序验证.我们通常所说的 ...

  7. Oracle游标--cursor_01-简单不带参数实现功能

    对于游标这个概念,可以理解为类似我们以前学习的jdbc的结果集对象, 我们可以使用游标对结果集从上到下进行遍历,获取每一行内容 首先我们要分析一下游标的分类 带参数的 书写函数的整体架构 定义游标 开 ...

  8. ZooKeeper设置ACL权限控制

    ZK的节点有5种操作权限:CREATE.READ.WRITE.DELETE.ADMIN 也就是 增.删.改.查.管理权限,这5种权限简写为crwda(即:每个单词的首字符缩写)注:这5种权限中,del ...

  9. [2015hdu多校联赛补题]hdu5384 Danganronpa

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5384 题意:函数f(A, B)定义:A.B为字符串,f(A, B)为A中有多少个不同的B(ex:f(& ...

  10. Linux(Centos) 安装windows字体

    有时候在Linux中需要用到windows字体,比如微软雅黑字体,这个时候,可能就需要我们手动去安装字体了(当然,如果服务器上没装过),简单几步如下: 1.在$WINDOWS/Fonts目录中找到对应 ...