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

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
  1. < div   class = "Main" >      
  2.           < div   class = "Input_Box" >      
  3.             < textarea   class = "Input_text" > </ textarea >      
  4.             < div   class = "faceDiv" >   </ div >      
  5.             < div   class = "Input_Foot" >   <​   class = "imgBtn"   href = "javascript:void(0);" > </ a > < a   class = " postBtn " > OK </a>   </ div >      
  6.           </ div >      
  7.         </ div >     

CSS3 code:

CSS CodeCopy content to clipboard
  1. .Input_Box {
  2.      width : 495px ;
  3.      height : 160px ;
  4.      border : 1px   solid   #ccc ;
  5. transition: border linear .2s, box-shadow linear .5s;
  6. -moz-transition: border linear .2s, -moz-box-shadow linear .5s;
  7. -webkit-transition: border linear .2s, -webkit-box-shadow linear .5s;
  8. -moz- border -radius: 5px ;
  9. -webkit- border -radius: 5px ;
  10.      border -radius: 5px ;
  11.      background-color : #fff ;
  12.      overflow : hidden ;
  13.      position : absolute ;
  14. -moz-box-shadow: 0 0 5px   #ccc ;
  15. -webkit-box-shadow: 0 0 5px   #ccc ;
  16. box-shadow: 0 0 5px   #ccc ;
  17. }
  18. .Input_Box>textarea {
  19.      width : 485px ;
  20.      height : 111px ;
  21.      padding : 5px ;
  22.      outline : none ;
  23.      border : 0px   solid   #fff ;
  24. resize: none ;
  25.      font : 13px   "Microsoft YaHei" , Arial , Helvetica , sans-serif ;
  26. -moz- border -radius: 5px ;
  27. -webkit- border -radius: 5px ;
  28.      border -radius: 5px ;
  29. }
  30. .Input_Foot {
  31.      width : 100%;
  32.      height : 35px ;
  33.      border-top : 1px   solid   #ccc ;
  34.      background-color : #fff ;
  35. -moz- border -radius: 0 0 5px   5px ;
  36. -webkit- border -radius: 0 0 5px   5px ;
  37.      border -radius: 0 0 5px   5px ;
  38.      position : absolute ;
  39. }
  40. .imgBtn {
  41.      float : left ;
  42.      margin-top : 8px ;
  43.      margin-left : 10px ;
  44.      background-image : url (imgs.png);
  45.      background-repeat : no-repeat ;
  46.      background-position : 0 - 13px ;
  47.      height : 18px ;
  48.      width : 20px ;
  49.      cursor : pointer      
  50. }
  51. .imgBtn:active {
  52.      margin-top : 9px ;
  53. }
  54. .imgBtn:hover {
  55.      background-position : 0 - 31px      
  56. }
  57. .postBtn {
  58.      float : right right ;
  59.      font : 13px   "Microsoft YaHei" , Arial , Helvetica , sans-serif ;
  60.      color : #808080 ;
  61.      padding : 9px   20px   7px   20px ;
  62.      border-left : 1px   solid   #ccc ;
  63.      cursor : pointer ;
  64. -moz- border -radius: 0 0 5px 0;
  65. -webkit- border -radius: 0 0 5px 0;
  66.      border -radius: 0 0 5px 0;
  67. }
  68. .postBtn:hover {
  69.      color : #333 ;
  70.      background-color : #efefef ;
  71. }
  72. .postBtn:active {
  73.      padding : 10px   20px   6px   20px ;
  74. }
  75. .faceDiv {
  76.      width : 500px ;
  77.      height : 120px ;
  78.      border-top : 1px   solid   #ccc ;
  79.      position : absolute ;
  80.      background-color : #fff ;
  81. -moz- border -radius: 5px   5px 0 0;
  82. -webkit- border -radius: 5px   5px 0 0;
  83.      border -radius: 5px   5px 0 0;
  84. }
  85. .faceDiv>img {
  86.      border : 1px   solid   #ccc ;
  87.      float : left ;
  88.      margin-left : - 1px ;
  89.      margin-top : - 1px ;
  90.      position : relative ;
  91.      width : 24px ;
  92.      height : 24px ;
  93.      padding : 3px   3px   3px   3px ;
  94.      cursor : pointer ;
  95. }
  96. .faceDiv>img:hover {
  97.      background-color : #efefef ;
  98. }
  99. .faceDiv>img:active {
  100.      padding : 4px   3px   2px   3px ;
  101. }

Javascript code:

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

<<:  How to make CSS child elements highly consistent with parent elements

>>:  Summary of learning HTML tags and basic elements

Recommend

Detailed process of building mysql5.7.29 on centos7 of linux

1. Download MySQL 1.1 Download address https://do...

Solutions to problems related to software package dependency reporting during installation in Linux

Table of contents background 1) Enable the keepch...

Getting Started Guide to MySQL Sharding

Preface Relational databases are more likely to b...

MySQL DML statement summary

DML operations refer to operations on table recor...

A brief analysis of the difference between ref and toRef in Vue3

1. ref is copied, the view will be updated If you...

Linux kernel device driver memory management notes

/********************** * Linux memory management...

Install JDK8 in rpm mode on CentOS7

After CentOS 7 is successfully installed, OpenJDK...

JavaScript flow control (branching)

Table of contents 1. Process Control 2. Sequentia...

JavaScript Prototype Details

Table of contents 1. Overview 1.1 What is a proto...

Use non-root users to execute script operations in docker containers

After the application is containerized, when the ...

Specific use of MySQL segmentation function substring()

There are four main MySQL string interception fun...

JavaScript to implement login form

This article example shares the specific code of ...

Super detailed MySQL usage specification sharing

Recently, there have been many database-related o...

What is table partitioning and partitioning? MySql database partitioning and table partitioning method

1. Why do we need to divide tables and partitions...

How to change the Ali source in Ubuntu 20.04

Note that this article does not simply teach you ...