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 ...
随机推荐
- java之spring mvc之Controller配置的几种方式
这篇主要讲解 controller配置的几种方式. 1. URL对应 Bean 如果要使用此类配置方式,需要在XML中做如下样式配置 <!-- 配置handlerMapping --> & ...
- C#泛型集合之——队列与堆栈
队列与堆栈基础 队列 1.操作: (1)创建及初始化: Queue<类型> 队列名 =new Queue<类型>()://空队列,无元素 Queue<类型> 队列名 ...
- C# 获取某个时间的0点0分和23点59分59秒
C#获取当月第一天和最后一天 当月第一天0时0分0秒: DateTime.Now.AddDays( - DateTime.Now.Day).Date 当月最后一天23时59分59秒: DateTime ...
- sqlserver安装教程
1 安装步骤:http://jingyan.baidu.com/article/359911f573f71657fe030603.html 2 当提示装载第二张光盘时,在DAEMON Tools中把第 ...
- mybatis中参数为list集合时使用 mybatis in查询
mybatis中参数为list集合时使用 mybatis in查询 一.问题描述mybatis sql查询时,若遇到多个条件匹配一个字段,sql 如: select * from user where ...
- HTTP协议的认识
1.内容回顾 1.HTTP协议消息的格式: 1.请求(request) 请求方法 路径 HTTP/1.1 \r\n k1:v1\r\n ...\r\n \r\n 请求体 <--这里可以有可以没有 ...
- nodeJS从入门到进阶三(MongoDB数据库)
一.MongoDB数据库 1.概念 数据库(DataBase)是一个按照数据结构进行数据的组织,管理,存放数据的仓库. 2.关系型数据库 按照关系模型存储的数据库,数据与数据之间的关系非常密切,可以实 ...
- Flask 基础总结回顾
1.Flask Request # from flask import request request.form # 获取FormData中的数据 request.args # 获取URL中的数据 r ...
- 英语Affrike非洲Affrike单词
中文名称阿非利加洲(全称) 外文名称Africa 别 名Affrike 行政区类别洲 下辖地区北非.东非.西非.中非.南非 地理位置东濒印度洋,西临大西洋,北至地中海,南至好望角 面 积3022万平方 ...
- PHP、JS 中 encode/decode
PHP : urlencode() urldecode() JS : encodeURIComponent() decodeURIComponent() 同一字符串,编码后的结果一样 1