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 ...
随机推荐
- mPass多租户系统微服务开发平台
目录 项目总体架构图 基于SpringBoot2.x.SpringCloud并采用前后端分离的企业级微服务,多租户系统架构微服务开发平台 mPaaS(Microservice PaaS)为租户业务开发 ...
- C#高效编程
一. 使用readonly而不是const const是编译时常量,readonly是运行时常量.如果引用了一个库中的const常量,则在更新了程序集,但应用程序没有重新编译时,运行结果会出错 如程序 ...
- ABP 结合 MongoDB 集成依赖注入
1.我们再ABP项目添加一个.NET Core类库 类库名自定定义, 我这里定义为 TexHong_EMWX.MongoDb 添加NuGet包. ABP mongocsharpdriver 添加 A ...
- Laravel入门及实践，快速上手ThinkSNS+二次开发
温馨提示: l 本文纯干货,文字和代码居多,且适合零基础Laravel学习者: l 本文会新建一个名为 blog 的 Laravel 程序,这是一个非常简单的博客. l 欢迎随时关注ThinkSNS ...
- python day 15: IO多路复用,socketserver源码培析，
目录 python day 15 1. IO多路复用 2. socketserver源码分析 python day 15 2019/10/20 学习资料来自老男孩教育 1. IO多路复用 ''' I/ ...
- IDEA配置自己的注释
File-->Setting-->Live Templates,点击+,选择2.Template Group... 创建Group,我的命名为MyAnnotation,然后选中MyAnnt ...
- 日志 logback-spring.xml配置
文章转载自: https://blog.csdn.net/xu_san_duo/article/details/80364600 logback-spring.xml配置文件 1. 自己改下value ...
- Linux 各系统目录作用及内容
- logstash multiple piplines 配置方式
当logstash有很多个input类型需要处理时.为了更方便的管理,我们需要使用一个.conf(input->filter->output)配置文件来对应一个pipeline. pipl ...
- 使用Cloudera Manager添加Sentry服务
使用Cloudera Manager添加Sentry服务 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.通过CM添加Sentry服务 1>.点击添加服务进入CM服务安装向 ...