emojione实现可将表情符号自动转成emoji表情的输入框效果代码

代码语言:html

所属分类:其他

代码描述:emojione实现可将表情符号自动转成emoji表情的输入框效果代码

代码标签: emojione 表情 符号 自动 转成 emoji 输入框

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
 
<meta charset="UTF-8">
 



 
<style>
*{
 
box-sizing: border-box;
}
html
{
 
width: 100%;
 
height: 100%;
}
body
{
 
margin: 0px!important;
 
border: none;
 
padding: 0px;
 
background-color: #aa7ed3;
 
display:flex;
 
flex-wrap: wrap;
 
position: relative;
 
justify-content: space-around;
 
align-items: center;
 
width: 100%;
 
height: 100%;
 
font-family: sans-serif;
}
.main-container{
 
}
.editable {
   
padding: 10px 12px;
   
background-color: #fff;
   
border: 1px solid #ccc;
   
border-radius: 4px;
   
line-height: 26px;
   
width: 300px;
}


.editable:focus{
 
border-color: aqua;
}

[contenteditable=true]:empty:before{
 
color: #ccc;
 
content: attr(placeholder);
 
display: block; /* For Firefox */
 
white-space: pre-wrap;
}
.dis{
 
color: #444;
 
margin: 40px 0;
}
.emojione-icon{
 
width: 100%;
 
margin:40px 0;
}
</style>



 
 
</head>

<body>
 
<div class="main-container">
 
  <div class="editable" contenteditable="true" placeholder='Insert emojies like &q.........完整代码请登录后点击上方下载按钮下载查看

网友评论0