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. sql 用union合并合并查询结果

    合并操作与连接相似,因为他们都是将两个表合并起来的另一个表的方法,然而他们的合并方法有本质的区别, 合并是两个表的相加,连接时时两个表的相乘: 01 在合并中两个表原列的数量与数据类型必须相同:在连接 ...

  2. [转]CSS 表单元素对齐详解

    来源:http://blog.sina.com.cn/s/blog_655388ed0100lzyk.html 简单的设置input{vertical-align:middle}即可,完美的: lab ...

  3. Xcode添加摄像机访问权限<转>

    转帖地址:http://www.manew.com/thread-97708-1-1.html ============================================== ios系统 ...

  4. viewgroup用addview添加的view不显示问题

    先看代码: public class MyviewGroup extends ViewGroup { private final Context context; private View view; ...

  5. Java Daemon 守护线程

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

  6. Jmeter使用入门

    修改时间 修改内容 修改人 2016.3.12 创建 刘永志 2016.6.18 完成 刘永志 Jmeter简介 Jmeter的基本概念 百度百科: Apache JMeter是Apache组织开发的 ...

  7. android超快模拟器Ggenymotion的安装和配置

    原文地址:http://xiaochu.blog.51cto.com/1048262/1639613 Genymotion是一款运行速度快,且易于使用的android模拟器,非常适合与android程 ...

  8. 一年成为emacs高手

    http://blog.csdn.net/redguardtoo/article/details/7222501

  9. cf727e

    题意:给你一个模式串和一堆长度相同的不相同的匹配串,问是否有一个方案可以让这个模式串由这些匹配串首尾相连组成,每个串只能出现一次. 思路:还是比较简单的,显然模式串每个位置最多匹配一个匹配串,因为所有 ...

  10. DIOCP之编写第一个应用程序（一）

    Server 设计功能如下: 1.支持客户端登录 2.连接数据库进行操作 3.推送信息 4.限制文件上传大小 第一步:创建一个VCL-Forms Application(创建一个标准VCL程序) 第二 ...