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 ...
随机推荐
- 2019 完美世界java面试笔试题 （含面试题解析）
本人3年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.完美世界等公司offer,岗位是Java后端开发,最终选择去了完美世界. 面试了很多家公司,感觉大部分公司考察的点 ...
- Python进阶----异常处理
Python进阶----异常处理 一丶错误和异常 错误: 语法错误(这种错误,根本过不了python解释器的语法检测,必须在程序执行前就改正) #语法错误示范一 if #语法错误示范二 ...
- Maven父子工程，子项目变灰，提示该项目已被移除出maven父工程
最近使用maven的父子工程结构搭建微服务架构时,不知道什么原因, 子工程总是被莫名移除出父工程,然后打包处的项目名变成了灰色, 重启该项目时会提示,“该子项目已被移除,是否删除该项目”,这个 当然不 ...
- Solr基础知识二（导入数据）
上一篇讲述了solr的安装启动过程,这一篇讲述如何导入数据到solr里. 一.准备数据 1.1 学生相关表 创建学生表.学生专业关联表.专业表.学生行业关联表.行业表.基础信息表,并创建一条小白的信息 ...
- 面试中的nginx高可用高并发！
本文转自:91博客:原文地址:http://www.9191boke.com/439923471.html 面试题: nginx高可用?nginx 是如何实现并发的?为什么nginx不使用多线程?ng ...
- 洛谷P3629 [APIO2010]巡逻（树的直径）
如果考虑不算上新修的道路,那么答案显然为\(2*(n-1)\). 考虑\(k=1\)的情况,会发现如果我们新修建一个道路,那么就会有一段路程少走一遍.这时选择连接树的直径的两个端点显然是最优的. 难就 ...
- java代码获取项目版本号实例
package com.hzcominfo.application.etl.settings.web.controller.highconfig; import com.hzcominfo.appli ...
- Centos7服务器搭建部署显卡计算环境以及常用软件的安装使用
安装好anaconda的服务器上会more你已经安装好jupyter notebook,执行下面的命令可以提供链接地址允许远程浏览器打开并访问: jupyter notebook --no-brows ...
- 回调方式进行COM组件对外消息传递
情景:被调用者--COM组件:调用者---外部程序作用:COM组件 到 外部程序 的消息传递方法: 1.外部程序通过接口类对象,访问接口类的方法.COM对象通过连接点方式,进行消息的反向传递. 2.外 ...
- 超详细的Hadoop2配置详解
1. 集群环境 Master 192.168.2.100 Slave1 192.168.2.101 Slave2 192.168.2.102 2. 下载安装包 Master wget http://m ...