Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > Tutorial on how to create a comment box with emoticons using HTML and CSS_HTML/Xhtml_Web page production

Tutorial on how to create a comment box with emoticons using HTML and CSS_HTML/Xhtml_Web page production

WBOY
Release： 2016-05-16 16:36:45
Original
2277 people have browsed it

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

Picture 1

Picture 2

Implemented 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.  
  5. <div class="Input_Foot" > <a class="imgBtn" href="javascript:void(0);"> ;a><a class="postBtn">OKa > div>  
    6. div>   div>  　
css3 code:

CSS Code

Copy 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 "微软雅黑", 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: rightright;     
  59.     font: 13px "微软雅黑", 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 Code
Copy content to clipboard
  1. var ImgIputHandler={ 
  2. facePath:[
  3. {faceName:"smile",facePath:"0_smile.gif"}, 
  4. {FACENAME: "🎜> , Facepath: " 1_ 撇 撇 .gif " > {faceName:
    5. "色"
  5. ,facePath:"2_色.gif"},  {FACENAME: "Duke"
  6. , Facepath: "3_ Duke .gif" }, {faceName:"Deyi"
  7. ,facePath:"4_Deyi.gif"},                                                                                                                                       >
    8. {faceName:
  8. "shy",facePath:"6_shy.gif"}, 
    9. {faceName:
  9. "Shut up", facePath:"7_Shut up.gif"},
    10. {faceName:
  10. "crying", facePath:"9_crying.gif"},
    11. {faceName:
  11. "Awkward",facePath:"10_awkward.gif"}, 
    12. {faceName:
  12. "angry",facePath:"11_angry.gif"},  {FACENAME:
  13. "Naughty" , FacePath: "12_ 皮 .gif" }, {faceName:
  14. "Barteeth",facePath:"13_Bargain.gif"}, {faceName:
  15. "surprise",facePath:"14_surprise.gif"},  {faceName:
  16. "sad",facePath:"15_sad.gif"},  {faceName:
  17. "Cool",facePath:"16_cool.gif"},  {faceName:
  18. "Cold Sweat",facePath:"17_Cold Sweat.gif"}, > {faceName:
    19. "Crazy"
  19. ,facePath:"18_Crazy.gif"}, 
  20. {faceName:"vomit",facePath:"19_vomit.gif"}, 
  21. {FACENAME: "Smiling" , FacePath: "20_linking .gif" },
  22. {faceName:"cute",facePath:"21_cute.gif"}, 
  23. {faceName:"White Eyes",facePath:"22_White Eyes.gif"}, 
  24. {faceName:"arrogance",facePath:"23_arrogance.gif"}, 
  25. {faceName:"hunger",facePath:"24_hunger.gif"}, 
  26. {faceName:"trapped",facePath:"25_trapped.gif"}, 
  27. {faceName:"Horror",facePath:"26_Horror.gif"}, 
  28. {faceName:"sweat", facePath:"27_sweat.gif"},
    29. {FACENAME:
  29. "憨" , facepath: "28_ 憨 笑 .gif" },
    30. {faceName:
  30. "GI",facePath:"29_GI.gif"}, 
    31. {faceName:
  31. "struggle",facePath:"30_struggle.gif"}, 
    32. {faceName:
  32. "curse",facePath:"31_curse.gif"}, 
    33. {faceName:
  33. "question",facePath:"32_question.gif"}, 
    34. {faceName:
  34. "Sh",facePath:"33_boo.gif"}, 
    35. {faceName:
  35. "halo",facePath:"34_halo.gif"}, 
    36. {faceName:
  36. "torture",facePath:"35_torture.gif"},  {FACENAME:
  37. "decline" , FacePath: "36_ 衰 .gif" }, {faceName:
  38. "Skeleton",facePath:"37_skeleton.gif"}, 
  39. {FACENAME: "Tap" , Facepath: "38_ hit .gif" },
  40. {faceName:"Goodbye",facePath:"39_Goodbye.gif"}, 
  41. {faceName:"wipe sweat", facePath:"40_wipe sweat.gif"},
  42.                                             {faceName:
  43. "picking your nose", facePath:"41_picking your nose.gif"}, {faceName:
  44. "Applause",facePath:"42_Applause.gif"},  {faceName:
  45. "I'm so embarrassed", facePath:"43_I'm embarrassed.gif" },  {faceName:
  46. "bad smile", facePath:"44_bad smile.gif"}, {faceName:
  47. "Zuo Hengheng", facePath:"45_left Hengheng.gif" },  {FACENAME:
    48. "Right Hum"
  48. , FacePath: "46_ right hum .gif" },  {faceName:
    49. "Yawn"
  49. ,facePath:"47_yawn.gif"},  {faceName:
    50. "Contempt"
  50. ,facePath:"48_Contempt.gif"},  {faceName:
    51. "grievance"
  51. ,facePath:"49_grievance.gif"},  {faceName:
    52. "I'm about to cry"
  52. , facePath:"50_I'm about to cry.gif" },  {faceName:
    53. "insidious"
  53. ,facePath:"51_insidious.gif"},  {faceName:
    54. "Kiss"
  54. , facePath:"52_Kiss.gif"}, {FACENAME: "Scared"
  55. , Facepath: "53_ <.gif class="string"> }, {faceName:"Poor"
  56. ,facePath:"54_Poor.gif"},  {faceName:"Chop Knife"
  57. ,facePath:"55_Chop Knife.gif"},  {faceName:"Watermelon"
  58. ,facePath:"56_watermelon.gif"}, 
  59. {faceName:"Beer",facePath:"57_beer.gif"}, 
  60. {faceName:"Basketball",facePath:"58_basketball.gif"}, 
  61. {faceName:"pingpong",facePath:"59_pingpong.gif"}, 
  62. {faceName:"Hug",facePath:"78_hug.gif"}, 
  63. {faceName:"Handshake",facePath:"81_Handshake.gif"}, 
  64. {faceName:"smiling smugly", facePath:"smiling smugly.gif"},
  65. {faceName:"Listen to music",facePath:"Listen to music.gif"} 
  66. ]
  67. , ,
  68. Init:function(){
  69.  var isShowImg=false; 
  70. $(".Input_text").focusout(function(){
  71. $(this).parent().css("border-color", "#cccccc");
    72. $(
  72. this).parent().css("box-shadow", "none");
    73. $(
  73. this).parent().css("-moz-box-shadow", "none"); $(
    74. this
  74. ).parent().css("-webkit-box-shadow", "none"); });     
  75.         $(".Input_text").focus(function(){     
  76.         $(this).parent().css("border-color", "rgba(19,105,172,.75)");     
  77.         $(this).parent().css("box-shadow", "0 0 3px rgba(19,105,192,.5)");     
  78.         $(this).parent().css("-moz-box-shadow", "0 0 3px rgba(241,39,232,.5)");     
  79.         $(this).parent().css("-webkit-box-shadow", "0 0 3px rgba(19,105,252,3)");     
  80.         });     
  81.         $(".imgBtn").click(function(){     
  82.             if(isShowImg==false){     
  83.                 isShowImg=true;     
  84.                 $(this).parent().prev().animate({marginTop:"-125px"},300);     
  85.                 if($(".faceDiv").children().length==0){     
  86.                     for(var i=0;i
  87.                         $(".faceDiv").append(" ImgIputHandler.facePath[i].faceName "" src="face/" ImgIputHandler.facePath[i].facePath "" />");     
  88.                     }     
  89.                     $(".faceDiv>img").click(function(){     
  90.                               
  91.                         isShowImg=false;     
  92.                         $(this).parent().animate({marginTop:"0px"},300);     
  93.                         ImgIputHandler.insertAtCursor($(".Input_text")[0],"[" $(this).attr("title") "]");     
  94.                     });     
  95.                 }     
  96.             }else{     
  97.                 isShowImg=false;     
  98.                 $(this).parent().prev().animate({marginTop:"0px"},300);     
  99.             }     
  100.         });     
  101.         $(".postBtn").click(function(){     
  102.             alert($(".Input_text").val());     
  103.         });     
  104.     },     
  105.     insertAtCursor:function(myField, myValue) {     
  106.     if (document.selection) {     
  107.         myField.focus();     
  108.         sel = document.selection.createRange();     
  109.         sel.text = myValue;     
  110.         sel.select();     
  111.     } else if (myField.selectionStart || myField.selectionStart == "0") {     
  112.         var startPos = myField.selectionStart;     
  113.         var endPos = myField.selectionEnd;     
  114.         var restoreTop = myField.scrollTop;     
  115.         myField.value = myField.value.substring(0, startPos)   myValue   myField.value.substring(endPos, myField.value.length);     
  116.         if (restoreTop > 0) {     
  117.             myField.scrollTop = restoreTop;     
  118.         }     
  119.         myField.focus();     
  120.         myField.selectionStart = startPos   myValue.length;     
  121.         myField.selectionEnd = startPos   myValue.length;     
  122.     } else {     
  123.         myField.value  = myValue;     
  124.         myField.focus();     
  125.     }     
  126. }     
  127. }    
Related labels：
html输入表情 html获取文本框的值 表情输入框
source：php.cn
Previous article：Use vertical-align to align input and img_HTML/Xhtml_Web page production Next article：HTML uses the title attribute to display text on mouse hover_HTML/Xhtml_Web page production
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Record query under partial value conditions - SQL skill sharing I have a table called zipcode which has a column called code. The Code column contains the...
From 2024-04-06 16:01:26
0
1
395
The console does not display the text input I provide So I'm using formik to build a form in React. I made a TextInput component that contains a...
From 2024-04-04 20:30:28
0
1
404
Make sure the table cell's container fills the entire height of the parent I'm trying to vertically align the content without using Flexbox, because there are some i...
From 2024-04-04 16:03:18
0
1
404
Add additional values ​​to displayed format data fields using javascript I'm trying to achieve this: I want to create a form that collects data entered by the user...
From 2024-04-04 15:17:13
0
1
3589
Retrieve payment method history for WooCommerce customers I found a script that helps me get the information I need: the payment methods a customer ...
From 2024-04-04 14:57:11
0
1
428
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template