Tutorial on how to create a comment box with emoticons using HTML and CSS

HTML comment box with emoticons. The emoticons are loaded through Json data, and you can change the emoticons according to your preferences. The code of this comment box is composed of HTML, CSS and JQ. Figure 1 shows the original state, and Figure 2 shows the list of emoticons that appears when you click an emoticon. You can select one or more emoticons at will. Let's take a look at the implementation code.

Figure 1

Figure 2

Implementation code:

HTML code:

XML/HTML CodeCopy content to clipboard

< div class = "Main" >
< div class = "Input_Box" >
< textarea class = "Input_text" > </ textarea >
< div class = "faceDiv" > </ div >
< div class = "Input_Foot" > < class = "imgBtn" href = "javascript:void(0);" > </ a > < a class = " postBtn " > OK </a> </ div >
</ div >
</ div >

CSS3 code:

CSS CodeCopy content to clipboard

.Input_Box {
width : 495px ;
height : 160px ;
border : 1px solid #ccc ;
transition: border linear .2s, box-shadow linear .5s;
-moz-transition: border linear .2s, -moz-box-shadow linear .5s;
-webkit-transition: border linear .2s, -webkit-box-shadow linear .5s;
-moz- border -radius: 5px ;
-webkit- border -radius: 5px ;
border -radius: 5px ;
background-color : #fff ;
overflow : hidden ;
position : absolute ;
-moz-box-shadow: 0 0 5px #ccc ;
-webkit-box-shadow: 0 0 5px #ccc ;
box-shadow: 0 0 5px #ccc ;
}
.Input_Box>textarea {
width : 485px ;
height : 111px ;
padding : 5px ;
outline : none ;
border : 0px solid #fff ;
resize: none ;
font : 13px "Microsoft YaHei" , Arial , Helvetica , sans-serif ;
-moz- border -radius: 5px ;
-webkit- border -radius: 5px ;
border -radius: 5px ;
}
.Input_Foot {
width : 100%;
height : 35px ;
border-top : 1px solid #ccc ;
background-color : #fff ;
-moz- border -radius: 0 0 5px 5px ;
-webkit- border -radius: 0 0 5px 5px ;
border -radius: 0 0 5px 5px ;
position : absolute ;
}
.imgBtn {
float : left ;
margin-top : 8px ;
margin-left : 10px ;
background-image : url (imgs.png);
background-repeat : no-repeat ;
background-position : 0 - 13px ;
height : 18px ;
width : 20px ;
cursor : pointer
}
.imgBtn:active {
margin-top : 9px ;
}
.imgBtn:hover {
background-position : 0 - 31px
}
.postBtn {
float : right right ;
font : 13px "Microsoft YaHei" , Arial , Helvetica , sans-serif ;
color : #808080 ;
padding : 9px 20px 7px 20px ;
border-left : 1px solid #ccc ;
cursor : pointer ;
-moz- border -radius: 0 0 5px 0;
-webkit- border -radius: 0 0 5px 0;
border -radius: 0 0 5px 0;
}
.postBtn:hover {
color : #333 ;
background-color : #efefef ;
}
.postBtn:active {
padding : 10px 20px 6px 20px ;
}
.faceDiv {
width : 500px ;
height : 120px ;
border-top : 1px solid #ccc ;
position : absolute ;
background-color : #fff ;
-moz- border -radius: 5px 5px 0 0;
-webkit- border -radius: 5px 5px 0 0;
border -radius: 5px 5px 0 0;
}
.faceDiv>img {
border : 1px solid #ccc ;
float : left ;
margin-left : - 1px ;
margin-top : - 1px ;
position : relative ;
width : 24px ;
height : 24px ;
padding : 3px 3px 3px 3px ;
cursor : pointer ;
}
.faceDiv>img:hover {
background-color : #efefef ;
}
.faceDiv>img:active {
padding : 4px 3px 2px 3px ;
}

Javascript code:

JavaScript CodeCopy content to clipboard

var ImgIputHandler = {
facePath:[
{faceName: "Smile" ,facePath: "0_Smile.gif" },
{faceName: "撇嘴" ,facePath: "1_撇嘴.gif" },
{faceName: "color" , facePath: "2_color.gif" },
{faceName: "大呆" ,facePath: "3_大呆.gif" },
{faceName: "Deyi" ,facePath: "4_Deyi.gif" },
{faceName: "tears" ,facePath: "5_tears.gif" },
{faceName: "shy" ,facePath: "6_shy.gif" },
{faceName: "Shut up" ,facePath: "7_Shut up.gif" },
{faceName: "Big Cry" ,facePath: "9_Big Cry.gif" },
{faceName: "awkward" ,facePath: "10_awkward.gif" },
{faceName: "Angry" ,facePath: "11_Angry.gif" },
{faceName: "naughty" , facePath: "12_naughty.gif" },
{faceName: "龇牙" ,facePath: "13_龇牙.gif" },
{faceName: "Surprised" ,facePath: "14_Surprised.gif" },
{faceName: "sad" ,facePath: "15_sad.gif" },
{faceName: "Cool" ,facePath: "16_Cool.gif" },
{faceName: "cold sweat" ,facePath: "17_cold sweat.gif" },
{faceName: "Crazy" ,facePath: "18_Crazy.gif" },
{faceName: "吐" ,facePath: "19_吐.gif" },
{faceName: "偷笑" ,facePath: "20_偷笑.gif" },
{faceName: "cute" ,facePath: "21_cute.gif" },
{faceName: "white eyes" ,facePath: "22_white eyes.gif" },
{faceName: "Arrogant" ,facePath: "23_Arrogant.gif" },
{faceName: "Hungry" ,facePath: "24_Hungry.gif" },
{faceName: "困" ,facePath: "25_困.gif" },
{faceName: "horror" ,facePath: "26_horror.gif" },
{faceName: "Sweating" ,facePath: "27_Sweating.gif" },
{faceName: "傻笑" ,facePath: "28_傻笑.gif" },
{faceName: "大兵" ,facePath: "29_大兵.gif" },
{faceName: "Struggle" ,facePath: "30_Struggle.gif" },
{faceName: "Swear" ,facePath: "31_Swear.gif" },
{faceName: "doubt" ,facePath: "32_doubt.gif" },
{faceName: "呼" ,facePath: "33_呼.gif" },
{faceName: "晕" ,facePath: "34_晕.gif" },
{faceName: "torture" ,facePath: "35_torture.gif" },
{faceName: "衰" ,facePath: "36_衰.gif" },
{faceName: "Skull" ,facePath: "37_Skull.gif" },
{faceName: "Knock" ,facePath: "38_knock.gif" },
{faceName: "Goodbye" ,facePath: "39_Goodbye.gif" },
{faceName: "wipe sweat" ,facePath: "40_wipe sweat.gif" },
{faceName: "Picking nose" ,facePath: "41_Picking nose.gif" },
{faceName: "applause" ,facePath: "42_applause.gif" },
{faceName: "峗大了" ,facePath: "43_峗大了.gif" },
{faceName: "bad smile" ,facePath: "44_bad smile.gif" },
{faceName: "左哄哄" ,facePath: "45_左哄哄.gif" },
{faceName: "右哄哄" ,facePath: "46_右哄哄.gif" },
{faceName: "yawn" ,facePath: "47_yawn.gif" },
{faceName: "despise" ,facePath: "48_despise.gif" },
{faceName: "grievance" ,facePath: "49_grievance.gif" },
{faceName: "I'm about to cry" ,facePath: "50_I'm about to cry.gif" },
{faceName: "Insidious" ,facePath: "51_Insidious.gif" },
{faceName: "亲亲" ,facePath: "52_亲亲.gif" },
{faceName: "吓" ,facePath: "53_吓.gif" },
{faceName: "Poor" ,facePath: "54_Poor.gif" },
{faceName: "菜刀" ,facePath: "55_菜刀.gif" },
{faceName: "Watermelon" ,facePath: "56_Watermelon.gif" },
{faceName: "beer" ,facePath: "57_beer.gif" },
{faceName: "Basketball" ,facePath: "58_Basketball.gif" },
{faceName: "Ping Pong" ,facePath: "59_Ping Pong.gif" },
{faceName: "Hug" ,facePath: "78_Hug.gif" },
{faceName: "handshake" ,facePath: "81_handshake.gif" },
{faceName: "smile proudly" ,facePath: "smile proudly.gif" },
{faceName: "listening to music" ,facePath: "listening to music.gif" }
]
,
Init: function (){
var isShowImg = false ;
$( ".Input_text" ).focusout( function (){
$( this ).parent().css( "border-color" , "#cccccc" );
$( this ).parent().css( "box-shadow" , "none" );
$( this ).parent().css( "-moz-box-shadow" , "none" );
$( this ).parent().css( "-webkit-box-shadow" , "none" );
});
$( ".Input_text" ).focus( function (){
$( this ).parent().css( "border-color" , "rgba(19,105,172,.75)" );
$( this ).parent().css( "box-shadow" , "0 0 3px rgba(19,105,192,.5)" );
$( this ).parent().css( "-moz-box-shadow" , "0 0 3px rgba(241,39,232,.5)" );
$( this ).parent().css( "-webkit-box-shadow" , "0 0 3px rgba(19,105,252,3)" );
});
$( ".imgBtn" ).click( function (){
if (isShowImg == false ) {
isShowImg = true ;
$( this ).parent().prev().animate({marginTop: "-125px" },300);
if ($( ".faceDiv" ).children().length==0){
for ( var i=0;i<ImgIputHandler.facePath.length;i ){
$( ".faceDiv" ).append( "<img title=\"" ImgIputHandler.facePath[i].faceName "\" src=\"face/" ImgIputHandler.facePath[i].facePath "\" />" );
}
$( ".faceDiv>img" ).click( function (){
isShowImg = false ;
$( this ).parent().animate({marginTop: "0px" },300);
ImgIputHandler.insertAtCursor($( ".Input_text" )[0], "[" $( this ).attr( "title" ) "]" );
});
}
} else {
isShowImg = false ;
$( this ).parent().prev().animate({marginTop: "0px" },300);
}
});
$( ".postBtn" ).click( function (){
alert($( ".Input_text" ).val());
});
},
insertAtCursor: function (myField, myValue) {
if (document.selection) {
myField.focus();
sel = document.selection.createRange();
sel.text = myValue;
sel.select();
} else if (myField.selectionStart || myField.selectionStart == "0" ) {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
var restoreTop = myField.scrollTop;
myField.value = myField.value.substring(0, startPos) myValue myField.value.substring(endPos, myField.value.length);
if (restoreTop > 0) {
myField.scrollTop = restoreTop;
}
myField.focus();
myField.selectionStart = startPos myValue.length;
myField.selectionEnd = startPos myValue.length;
} else {
myField.value = myValue;
myField.focus();
}
}
}