用 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我们就…

PHP从零开始--基础篇

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

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…

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更改数…

如何下载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…

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工资…

三分钟掌握PHP操作数据库

这里写自定义目录标题一、 操作数据库&#xff08;mysql&#xff09;的工具1.1命令行工具1.2navicat界面化工具1.3phpAdmin界面化工具二、 表单传值2.1文本框和文本域传值2.2单选框传值2.4下拉菜单传值三、 php连接数据库3.1连接方式介绍3.2mysqli基础步骤3.2.1创建连接3.2.2选…

看完就会的文件编程

文章目录文件编程1.1文件操作函数1.1.1file()函数1.1.2fopen fgets fclose1.2.1读取模式1.2.2写入内容&#xff08;开头&#xff09;1.2.3写入内容&#xff08;追加&#xff09;1.1.3file_get_contents1.1.4文件路径相关函数1.1.5file_exists1.1.6feof1.1.7copy()1.1.8set_incl…

一文吃透PHP和HTML的嵌套写法

1.1全部php生成结构 1.2html中嵌套php 总结如下&#xff1a; html和php混写规则&#xff1a; php代码必须包在<?php ?>html中写php也是同理&#xff0c;但是有值输出必须加上echo 1.3博客项目 1.3.1前后台 前台主要是做数据展示的&#xff0c;所有的用户通过访问域…

一文看懂 GD2库

文章目录一、 GD2简介1、 验证码&#xff08;实际上是一个img&#xff09;二、 GD2库使用步骤2.1添加扩展2.2修改php配置文件2.3重启服务三、 GD2里面的常用方法3.1 imagecreate3.2 imagecolorallocate3.3 imagefill3.4 输出图像资源3.5创建真彩画布3.6在图像中写文字3.6.1imag…

算法实践--最小生成树(Kruskal算法)

什么是最小生成树(Minimum Spanning Tree) 每两个端点之间的边都有一个权重值&#xff0c;最小生成树是这些边的一个子集。这些边可以将所有端点连到一起&#xff0c;且总的权重最小 下图所示的例子&#xff0c;最小生成树是{cf, fa, ab} 3条边 Kruskal算法 用到上一篇中介绍的…

洽谈 “会话技术” 纯干货赶紧收藏吧

文章目录一、 HTTP协议二、 会话三、 cookie3.1概念和设置cookie3.2读取cookie3.3设置cookie有效期3.4cookie是跨页面的3.5删除cookie3.6登录案例3.7cookie特点四、 session4.1概念4.2设置session4.3获取session4.4清除session4.5模拟购物车案例一、 HTTP协议 HTTP协议是Hyper…

[bzoj2729][HNOI2012]排队 题解 (排列组合 高精)

Description 某中学有 n 名男同学&#xff0c;m 名女同学和两名老师要排队参加体检。他们排成一条直线&#xff0c;并且任意两名女同学不能相邻&#xff0c;两名老师也不能相邻&#xff0c;那么一共有多少种排法呢&#xff1f;&#xff08;注意&#xff1a;任意两个人都是不同的…