运用contenteditable实现输入框高度自动增加，输入框标题name相对高度自动居中，代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="renderer" content="webkit|ie-comp|ie-stand">

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="format-detection" content="telephone=no" />

<title>contenteditable可编辑属性</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

<style type="text/css">

    .container {

        position: relative;

        width: 300px;

        min-height: 40px;

        padding-left: 100px;

    }

    .name {

        position: absolute;

        left: 0;

        top: 50%;

        transform: translateY(-50%);

        width: 100px;

    }

    .input {

        line-height: 40px;

    }

</style>

</head>

<body>

<div class="container">

    <div class="name">备注说明：</div>

    <div class="input" contenteditable="true">可编辑输入框</div>

</div>

</body>

</html>

美中不足之处，contenteditable属性模拟的输入框是可以输入HTML代码的，在提交给后台的时候需要做一下过滤，要不然会被xss注入攻击；或者提交的时候用js获取模拟input的innerText提交。

HTML5之contenteditable可编辑属性的更多相关文章

  1. HTML5它contenteditable属性

    HTML5它contenteditable属性 1.功能说明 (1)功能:同意用户编辑元素中的内容 (2)说明:是一个布尔值.false是不能编辑,true为可编辑 2.分析实例 (1)content ...

  2. HTML5之contenteditable属性

    HTML5之contenteditable属性 1.功能说明 (1)功能:允许用户编辑元素中的内容 (2)说明:是一个布尔值,false是不能编辑,true为可编辑 2.分析实例 (1)content ...

  3. easyui如何动态改变列的编辑属性

    动态改变列的编辑属性 var tt=$('#dg').datagrid('getColumnOption', 'yearContent'); //通过列名获得此列 tt.editor={type:'t ...

  4. html5 audio的语法以及属性和方法

    使用语法<audio src="song.mp3" controls="controls" loop="loop" autoplay= ...

  5. C# 如何定义让PropertyGrid控件显示[...]按钮，并且点击后以下拉框形式显示自定义控件编辑属性值

    关于PropertyGrid控件的详细用法请参考文献: 1.C# PropertyGrid控件应用心得 2.C#自定义PropertyGrid属性 首先定义一个要在下拉框显示的控件: using Sy ...

  6. HTML5 <a>标签的ping属性用法

    随着移动互联网用户井喷式的增长,web前端开发中的HTML5在近几年备受瞩目,越来越多的人从事html5开发相关工作.今天小编也来凑个热闹,和大家一起来谈谈HTML5中<a>标签的ping ...

  7. html5文本框提示文字属性为placeholder

    html5文本框提示文字属性为placeholder 例子:  <textarea id="comment" class="commentCont"  n ...

  8. HTML5中script的async属性异步加载JS

    HTML5中script的async属性异步加载JS     HTML4.01为script标签定义了5个属性: charset 可选.指定src引入代码的字符集,大多数浏览器忽略该值.defer 可 ...

  9. mapgis处理编辑属性结构时 死机问题

    上午用的好好的mapgis6.7,下午就出错了,一编辑属性结构就出错,到网上查到了解决方法,和大家共享一下. 转自:http://bbs.3s001.com/forum.php?mod=viewthr ...

随机推荐

  1. phpdocmentor 生成php 开发文档(转载)

    PHPDocumentor是一个用PHP写的工具,对于有规范注释的php程序,它能够快速生成具有相互参照,索引等功能的API文档.老的版本是phpdoc,从1.3.0开始,更名为phpDocument ...

  2. C#实现RSA加密解密

    RSA介绍 RSA公钥加密算法是1977年由Ron Rivest、Adi Shamirh和LenAdleman在（美国麻省理工学院）开发的。RSA取名来自开发他们三者的名字。 RSA的缺点: 产生密钥 ...

  3. DNS原理及劫持问题

    对于互联网,人们总是高谈阔论,却很少有人愿意去了解电脑.手机.电视这些设备到底是如何被“连接”起来的.本文通过“我”,一个普通的网络请求的视角,给大家介绍下“我”的工作流程是如何的. 人们动动手指,点 ...

  4. Github下载慢和下载过程中断等情况的解决方案

    Github下载慢和下载过程中断等情况的解决方案   最近老大push项目,正常的git clone每次都是下载一部分就断掉了. 尝试了修改hosts文件的方式,更换了延迟最低的域名也没啥用(难道我姿 ...

  5. 【开发笔记】- QQ消息轰炸

    1.右键新建一个文本文件: 2.打开记事本将如下代码复制过去: On Error Resume Next Dim wsh,ye set wsh=createobject("wscript.s ...

  6. js删除对象里的某一个属性

    var a={"id":1,"name":"danlis"}; //添加属性 a.age=18; console.log(a); //结果: ...

  7. 英语46级CET外语大学词汇

    whereas conj.而,却,反之 witty a.机智的:风趣的 legislation n.立法:法规 length n.程度,范围 lengthen vt.使延长 vi.变长 leopard ...

  8. scrapy爬虫中间件-urlLength

    浏览器里面能输入的最大url是有限制的 safari 最多 一万多 ie最少  2083 urllength中间件源码 谷歌和火狐正常 八千多 """ Url Lengt ...

  9. 常识之外：全表扫描为何产生大量 db file sequential read 单块读？

    原创 2016-07-05 熊军 Oracle   编辑手记:在理解Oracle技术细节时,我们不仅应该读懂概念,还要能够通过测试验证细节,理解那些『功夫在诗外』的部分,例如全表扫描和单块读. 开发人 ...

  10. PHP 基于redis的分布式锁

    <?php class ProcessRedisLock { /** * redis key 前缀 */ const KEY_PREFIX = 'PROCESS_REDIS_LOCK:'; /* ...