用 div 仿写 input 和 textarea 功能

div仿写input和textarea

input不能换行,textarea也不能跟随内容多少而增加高度。

contenteditable = true;

<div class="msg_content" contenteditable="true" placeholder='在这里输入您的留言或建议'></div>
.msg_content {box-sizing: border-box;  background: #fafafa;border: 1px solid #dedede; border-radius: 20px; padding: 15px 20px;font-size: 30px; line-height: 40px; color: #333; outline: 0;-webkit-user-select: text;/* 在ios上有时不能输入文字,添上这个后ok */word-break: break-all; word-wrap: break-word;
}
.msg_content:empty:before { content: attr(placeholder); color: rgba(0, 0, 0, .5);} /* 模仿placeholder*/
.msg_content:focus:before { content: none;}

初始效果如下:

1412615-20190109151950146-703173770.png

输入文字后:

1412615-20190109151958913-943642959.png

转载于:https://www.cnblogs.com/xk-g/p/10244581.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/248670.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue项目中如何设置动态的TDK

TDK是什么 TDK就是网站的标题&#xff08;title&#xff09;、描述&#xff08;description&#xff09;和关键词&#xff08;keyword&#xff09; TDK在哪里 上面大佬对TDK的概念解释的很全面&#xff0c;但是在网页中的TDK在哪里呢&#xff0c;作为开发人员打开F12我们就…

[Pytorch]Pytorch的tensor变量类型转换

原文&#xff1a;https://blog.csdn.net/hustchenze/article/details/79154139 Pytorch的数据类型为各式各样的Tensor,Tensor可以理解为高维矩阵。与Numpy中的Array类似。Pytorch中的tensor又包括CPU上的数据类型和GPU上的数据类型&#xff0c;一般GPU上的Tensor是CPU上的Tenso…

PHP从零开始--基础篇

一、 变量 1.1概念 变量是存储数据的用的容器。 1.2定义变量 变量名的语法规则&#xff1a; 可以是数字、字母、下划线&#xff0c;但是不能以数字开头不能出现空格变量名是区分大小写变量名不能是系统中的关键字行业约定的语法规范 驼峰命名法 比如 myname 定义成 myNam…

node

‎ Table of Contents 1. 全局对象2. 代码执行优先级3. 模块导入4. 模块加载 4.1. 文件模块优先级4.2. 文件夹加载优先级 4.2.1. 包&#xff08;文件夹&#xff09;下的入口文件优先级4.2.2. 包加载优先级5. 核心模块的简单使用 5.1. events1 全局对象 globalconsole.log(globa…

一个关于WCF调用远程链接返回405错误不允许使用此方法的问题

最近在调试WCF的接口时一直返回“405不允许使用此方法”&#xff0c;这个问题困扰了大半天&#xff0c;网上查了各种办法&#xff0c;但是每个人遇到的问题不同还是不能解决。 最后无意之中发现问题所在&#xff0c;记录一下帮助后面的同学解决问题。 WCF远程方法会配置属性Web…

PHP从零开始--循环数组

一、循环 1.1单层for循环 1.1.1基础语法 for(初识变量;结束范围;累加/累减){ 重复执行的代码 } 1、 先初识化变量$i 2、 $i<100表达式进行判断 3、 跳入循环&#xff0c;执行重复代码 4、 累加或者累加 5、 再进行$i<100表达式判断 6、 再跳入循环&#xff0c;执行重复…

Spring Cloud(F版)搭建高可用服务注册中心

上一篇文章【Spring Cloud搭建注册中心】成功搭建了一个Eureka Server服务注册中心&#xff0c;不过相信细心的朋友都会发现&#xff0c;这个服务注册中心是一个单节点服务注册中心&#xff0c;万一发生故障或者服务器宕机&#xff0c;那所有的服务可就不能使用了&#xff0c;这…

Python(60)_闭包

1 、闭包的概念 #-*-coding:utf-8-*- 1、闭包&#xff1a;内部函数调用外部函数的变量def outer():a 1def inner():print(a)print(inner.__closure__) outer() print(outer.__closure__) 2 闭包的使用 #-*-coding:utf-8-*- 1、闭包&#xff1a;内部函数调用外部函数的变量 …

PHP从零开始--错误处理函数

一、错误处理 1.1错误种类 1.1.1Notices 比如没有定义变量确使用了会报notice错误&#xff0c;只是提醒注意&#xff0c;不影响后续代码执行 1.1.2Warnings 这是警告错误&#xff0c;比如include引入一个并不存在的文件&#xff0c;不影响后续代码执行 1.1.3Fatal Erro…

第四单元博客总结——暨OO课程总结

第四单元博客总结——暨OO课程总结 第四单元架构设计 第一次UML作业 简单陈述 第一次作业较为简单&#xff0c;只需要实现查询功能&#xff0c;并在查询的同时考虑到性能问题&#xff0c;即我简单的将每一次查询的结果以及递归的上层结果都存储下来&#xff0c;使用一个Boolean…

两列布局:6种方法

面试过程中总会文档两列布局&#xff0c;左边等宽&#xff0c;右边自适应几种方法&#xff1f;以下提供6种为君解忧 <div id"wrap"><div id"left"></div><div id"right"></div> </div>需求就是左侧定宽&…

PHP从零开始--数据库

文章目录一、 数据库简介1.1概念1.2命令行操作1.3连接数据库1.4配置环境变量二、 数据库的相关操作2.1显示所有仓库2.2创建仓库2.3删除仓库2.4切换仓库三、 数据表的相关操作3.1概念3.2显示所有的数据表3.3创建数据表3.2修改字段名3.3查看表结构3.4添加字段3.5删除字段3.6更改数…

常用SQL语句

将记录的某一字段值设置为空&#xff08;null&#xff09;UPDATE 表名 SET 字段名NULL WHERE 条件字段名123; 更新整列为某个值UPDATE 表名 SET 字段名NULL 转载于:https://www.cnblogs.com/zhcBlog/p/10254066.html

如何下载js类库

https://bower.io/ 这个已经淘汰 https://learn.jquery.com/jquery-ui/environments/bower/ Web sites are made of lots of things — frameworks, libraries, assets, and utilities. Bower manages all these things for you. Keeping track of all these packages and mak…

Python 常用系统模块整理

Python中的常用的系统模块中部分函数等的整理 random: 随机数sys: 系统相关os: 系统相关的subprocess: 执行新的进程multiprocessing: 进程相关threading: 线程相关pickle: 将对象转换成二进制文件time: 时间datetime: 基本的日期和时间类型timeit: 准确测量小段代码的执行时间…

PHP从零开始--字段修饰符数据操作SQL语言

文章目录一、 字段修饰符1.1主键1.2自动增长1.3非空1.4默认值1.5外键二、 对数据的操作2.1增加数据2.2删除数据2.3更新数据2.4查询数据2.4.1查询所有的数据2.4.2查询指定字段2.4.3去除重复字段2.4.4where表达式详解2.4.5分组查询2.4.6排序三、 SQL语言3.1DML3.2DDL3.3DCL一、 字…

scrapy爬虫框架windows下的安装问题

windows操作系统python版本是3.6.0通过Anaconda命令conda install scrapy安装scrapy,安装过程中没有问题。然后在命令行输入命令准备新建项目时&#xff0c;输入 scrapy startproject firstscrapy时出现了from cryptography.hazmat.bindings._openssl import ffi, libImportErr…

charles使用说明(基于mac)

1. Charles简介 1.1 Charles 需要java的运行环境支持&#xff0c;支持Windows、Mac&#xff1b;Fiddler不支持Mac。故Charles是在Mac下常用的网络封包截取工具。 1.2 Charles原理&#xff1a;通过将自己设置成系统的网络访问代理服务器&#xff0c;使得所有的网络访问请求都通过…

看完就懂的连表查询

文章目录一、表与表之间的关系1.1一对一1.2一对多1.3多对多二、 连表查询2.1概念2.2笛卡尔积2.3内连接2.4外连接2.4.1左外连接2.4.2右外连接2.4.3全连接2.4.4navicat导入导成sql语句2.4.5练习三、 子查询3.1概念3.2练习3.2.1查询工资最高的员工所有信息3.2.2查询工资比7654工资…

jpa

Transactionalpublic void testPerson() {try {Person person1 personDao.findById(1);person1.setAddress("天津");} catch (Exception e) {e.printStackTrace();}} service就这样一个方法&#xff0c;数据库中数据也会进行更新 将查询出来的数据对象赋值,然后不执…