运用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可编辑属性
原文地址：http://www.cnblogs.com/linx/p/8031411.html