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

Introduction to the use of em in elastic layout in CSS3: How many pixels is 1em?

I have been using CSS for a long time, but I have...

How to periodically clean up images that are None through Jenkins

Preface In the process of continuous code deliver...

Detailed explanation of the use of filter properties in CSS

The filter attribute defines the visual effect of...

How to package the uniapp project as a desktop application

Installing Electron cnpm install electron -g Inst...

How to use ssh tunnel to connect to mysql server

Preface In some cases, we only know the intranet ...

How to use axios request in Vue project

Table of contents 1. Installation 2. There is no ...

MySQL multi-instance configuration solution

1.1 What is MySQL multi-instance? Simply put, MyS...

HTML table tag tutorial (27): cell background image attribute BACKGROUND

We can set a background image for the cell, and w...

Example of utf8mb4 collation in MySQL

Common utf8mb4 sorting rules in MySQL are: utf8mb...

Java+Tomcat environment deployment and installation process diagram

Next, I will install Java+Tomcat on Centos7. Ther...

Specific usage of CSS compound selectors

Intersection Selector The intersection selector i...

Vue keeps the user logged in (various token storage methods)

Table of contents How to set cookies Disadvantage...

Linux server quick uninstall and install node environment (easy to get started)

1. Uninstall npm first sudo npm uninstall npm -g ...

Detailed explanation of incompatible changes in rendering functions in Vue3

Table of contents Rendering API changes Render fu...

Detailed explanation of publicPath usage in Webpack

Table of contents output output.path output.publi...