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提交。
HTML5之contenteditable可编辑属性的更多相关文章
- HTML5它contenteditable属性
HTML5它contenteditable属性 1.功能说明 (1)功能:同意用户编辑元素中的内容 (2)说明:是一个布尔值.false是不能编辑,true为可编辑 2.分析实例 (1)content ...
- HTML5之contenteditable属性
HTML5之contenteditable属性 1.功能说明 (1)功能:允许用户编辑元素中的内容 (2)说明:是一个布尔值,false是不能编辑,true为可编辑 2.分析实例 (1)content ...
- easyui如何动态改变列的编辑属性
动态改变列的编辑属性 var tt=$('#dg').datagrid('getColumnOption', 'yearContent'); //通过列名获得此列 tt.editor={type:'t ...
- html5 audio的语法以及属性和方法
使用语法<audio src="song.mp3" controls="controls" loop="loop" autoplay= ...
- C# 如何定义让PropertyGrid控件显示[...]按钮，并且点击后以下拉框形式显示自定义控件编辑属性值
关于PropertyGrid控件的详细用法请参考文献: 1.C# PropertyGrid控件应用心得 2.C#自定义PropertyGrid属性 首先定义一个要在下拉框显示的控件: using Sy ...
- HTML5 <a>标签的ping属性用法
随着移动互联网用户井喷式的增长,web前端开发中的HTML5在近几年备受瞩目,越来越多的人从事html5开发相关工作.今天小编也来凑个热闹,和大家一起来谈谈HTML5中<a>标签的ping ...
- html5文本框提示文字属性为placeholder
html5文本框提示文字属性为placeholder 例子: <textarea id="comment" class="commentCont" n ...
- HTML5中script的async属性异步加载JS
HTML5中script的async属性异步加载JS HTML4.01为script标签定义了5个属性: charset 可选.指定src引入代码的字符集,大多数浏览器忽略该值.defer 可 ...
- mapgis处理编辑属性结构时 死机问题
上午用的好好的mapgis6.7,下午就出错了,一编辑属性结构就出错,到网上查到了解决方法,和大家共享一下. 转自:http://bbs.3s001.com/forum.php?mod=viewthr ...
随机推荐
- 【JVM】jdk1.8-jetty-swap被占满问题排查
背景 线上服务收到报警,报警内容:虚拟机swap区占用比例超过80%,如图: 本文着重描述排查问题的过程,在这个过程中不断的猜测–>验证–>推翻–>再猜测–>再验证–>再 ...
- webpack集成vue单文件模式的很多坑（研究了1个星期）
1.一开始不知道局部安装webpack后,如何调用webpack. 后来看说明文档(webpack中文网)才知道,有个npx可以启动本地安装的webpack. 我估计:全局安装webpack,全局的w ...
- js模块基础练习题
题目描述 完成函数 createModule,调用之后满足如下要求: 1.返回一个对象 2.对象的 greeting 属性值等于 str1, name 属性值等于 str2 3.对象存在一个 sayI ...
- 学习笔记之Slurm
Slurm Workload Manager - Overview https://slurm.schedmd.com/overview.html Slurm is an open source, f ...
- Position定位相关知识了解
一.定位 position属性 1.默认定位: position:static; 元素框正常生成.块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其 ...
- 谷歌hack语法
搜索标题 intitle:"登入" //加引号是精确搜索 搜索正文 intext:"登入" 在URL中搜索 inurl:"/phpmyadmin&qu ...
- day 04 预科
目录 变量 什么是变量 变量的组成 变量名的命名规范 注释 单行注释 多行注释 turtle库的使用 今日内容 数据类型基础 变量 具体的值 存不是目的,取才是目的 为了描述世界万物的状态,因此有了数 ...
- MySQL MGR--数据同步原理
MGR复制架构 在MySQL 5.7.17版本正式推出组复制(MySQL Group Repliation MGR),用来解决异步复制和半同步复制可能产生数据不一致的问题,组复制依靠分布式一致性协议( ...
- Spring中获取被代理的对象
目录 Spring中获取被代理的对象 获取Spring被代理对象什么时候可能会用到? Spring中获取被代理的对象 Spring中获取被代理的对象 ### 获取Spring被代理对象的JAVA工具类 ...
- CentOS7 离线安装mysql-5.7.16
CentOS7 离线安装mysql-5.7.16 1 . 安装新版mysql前,需将系统自带的mariadb-lib卸载 [root@slave mytmp]# rpm -qa|grep mariad ...