運用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提交。