HTML5之contenteditable可编辑属性

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

posted @ 2017-12-13 10:03  极·简  Views(3329)  Comments(0)  Edit  收藏  举报