Tutorial zum Erstellen eines Kommentarfelds mit Emoticons mithilfe von HTML und CSS

Tutorial zum Erstellen eines Kommentarfelds mit Emoticons mithilfe von HTML und CSS

HTML-Kommentarfeld mit Emoticons. Die Emoticons werden über JSON-Daten geladen und Sie können die Emoticons nach Ihren Wünschen ändern. Der Code dieses Kommentarfelds besteht aus HTML, CSS und JQ. Abbildung 1 zeigt den Originalzustand, Abbildung 2 die Liste der Emoticons, die erscheint, wenn Sie auf ein Emoticon klicken. Sie können nach Belieben ein oder mehrere Emoticons auswählen. Werfen wir einen Blick auf den Implementierungscode.

Abbildung 1

Abbildung 2

Implementierungscode:

HTML Quelltext:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. < div   Klasse = "Haupt" >      
  2.           < div   Klasse = "Eingabefeld" >      
  3.             < Textbereich   Klasse = "Eingabetext" > </ Textbereich >      
  4.             < div   Klasse = "faceDiv" >   </div>​​      
  5.             < div   Klasse = "Input_Foot" >   <   Klasse = "imgBtn"   href = "javascript:void(0);" > </ a > < a   Klasse = " postBtn " > OK </a>   </div>​​      
  6.           </div>​​      
  7.         </div>​​     

CSS3-Code:

CSS- CodeInhalt in die Zwischenablage kopieren
  1. .Eingabefeld {
  2.      Breite : 495px ;
  3.      Höhe : 160px ;
  4.      Rand : 1px   solide   #ccc ;
  5. Übergang: Rand linear 0,2 s, Kastenschatten linear 0,5 s;
  6. -moz-transition: Rand linear 0,2 s, -moz-box-shadow linear 0,5 s;
  7. -webkit-transition: Rahmen linear 0,2 s, -webkit-box-shadow linear 0,5 s;
  8. -moz- Rand -Radius: 5px ;
  9. -webkit- Rahmen -Radius: 5px ;
  10.      Rahmen - Radius: 5px ;
  11.      Hintergrundfarbe : #fff ;
  12.      Überlauf : versteckt ;
  13.      Position : absolut ;
  14. -moz-box-shadow: 0 0 5px   #ccc ;
  15. -webkit-box-shadow: 0 0 5px   #ccc ;
  16. Kastenschatten: 0 0 5px   #ccc ;
  17. }
  18. .Input_Box>Textbereich {
  19.      Breite : 485px ;
  20.      Höhe : 111px ;
  21.      Polsterung : 5px ;
  22.      Umriss : keiner ;
  23.      Rand : 0px   solide   #fff ;
  24. Größenänderung: keine ;
  25.      Schriftart : 13px   "Microsoft YaHei" , Arial , Helvetica , serifenlos ;
  26. -moz- Rand -Radius: 5px ;
  27. -webkit- Rahmen -Radius: 5px ;
  28.      Rahmen - Radius: 5px ;
  29. }
  30. .Eingabe_Fuß {
  31.      Breite : 100 %;
  32.      Höhe : 35px ;
  33.      Rahmen oben : 1px   solide   #ccc ;
  34.      Hintergrundfarbe : #fff ;
  35. -moz- Rahmen -Radius: 0 0 5px   5px ;
  36. -webkit- Rahmen -Radius: 0 0 5px   5px ;
  37.      Rahmen - Radius: 0 0 5px   5px ;
  38.      Position : absolut ;
  39. }
  40. .imgBtn {
  41.      Schwimmer : links ;
  42.      Rand oben : 8px ;
  43.      Rand links : 10px ;
  44.      Hintergrundbild : URL (imgs.png);
  45.      Hintergrundwiederholung : keine Wiederholung ;
  46.      Hintergrundposition : 0 – 13px ;
  47.      Höhe : 18px ;
  48.      Breite : 20px ;
  49.      Cursor : Zeiger      
  50. }
  51. .imgBtn:aktiv {
  52.      Rand oben : 9px ;
  53. }
  54. .imgBtn:hover {
  55.      Hintergrundposition : 0 – 31px      
  56. }
  57. .postBtn {
  58.      float : rechts rechts ;
  59.      Schriftart : 13px   "Microsoft YaHei" , Arial , Helvetica , serifenlos ;
  60.      Farbe : #808080 ;
  61.      Polsterung : 9px   20px   7px   20px ;
  62.      Rahmen links : 1px   solide   #ccc ;
  63.      Cursor : Zeiger ;
  64. -moz- Rand -Radius: 0 0 5px 0;
  65. -webkit- Rand -Radius: 0 0 5px 0;
  66.      Rahmen - Radius: 0 0 5px 0;
  67. }
  68. .postBtn:hover {
  69.      Farbe : #333 ;
  70.      Hintergrundfarbe : #efefef ;
  71. }
  72. .postBtn:aktiv {
  73.      Polsterung : 10px   20px   6px   20px ;
  74. }
  75. .faceDiv {
  76.      Breite : 500px ;
  77.      Höhe : 120px ;
  78.      Rahmen oben : 1px   solide   #ccc ;
  79.      Position : absolut ;
  80.      Hintergrundfarbe : #fff ;
  81. -moz- Rahmen -Radius: 5px   5px 0 0;
  82. -webkit- Rahmen -Radius: 5px   5px 0 0;
  83.      Rahmen - Radius: 5px   5px 0 0;
  84. }
  85. .faceDiv>img {
  86.      Rand : 1px   solide   #ccc ;
  87.      Schwimmer : links ;
  88.      Rand links : - 1px ;
  89.      Rand oben : – 1px ;
  90.      Position : relativ ;
  91.      Breite : 24px ;
  92.      Höhe : 24px ;
  93.      Polsterung : 3px   3px   3px   3px ;
  94.      Cursor : Zeiger ;
  95. }
  96. .faceDiv>img:hover {
  97.      Hintergrundfarbe : #efefef ;
  98. }
  99. .faceDiv>img:aktiv {
  100.      Polsterung : 4px   3px   2px   3px ;
  101. }

Javascript-Code:

JavaScript CodeInhalt in die Zwischenablage kopieren
  1. var ImgIputHandler = {
  2. Gesichtspfad:[
  3. {Gesichtsname: "Smile" , Gesichtspfad: "0_Smile.gif" },
  4. {faceName: "Gesichtsname" , facePath: "1_Gesichtsname.gif" },
  5. {Gesichtsname: "Farbe" , Gesichtspfad: "2_color.gif" },
  6. {faceName: "Gesichtsname" , facePath: "3_Gesichtsname.gif" },
  7. {Gesichtsname: "Deyi" , Gesichtspfad: "4_Deyi.gif" },
  8. {Gesichtsname: "Tränen" , Gesichtspfad: "5_Tränen.gif" },
  9. {faceName: "schüchtern" , facePath: "6_schüchtern.gif" },
  10. {faceName: "Halt die Klappe" , facePath: "7_Halt die Klappe.gif" },
  11. {Gesichtsname: "Großer Schrei" , Gesichtspfad: "9_Großer Schrei.gif" },
  12. {Gesichtsname: "ungeschickt" , Gesichtspfad: "10_ungeschickt.gif" },
  13. {Gesichtsname: "Wütend" , Gesichtspfad: "11_Wütend.gif" },
  14. {Gesichtsname: "ungezogen" , Gesichtspfad: "12_ungezogen.gif" },
  15. {faceName: "Gesichtsname" , facePath: "13_Gesichtsname.gif" },
  16. {faceName: "Überrascht" , facePath: "14_Überrascht.gif" },
  17. {Gesichtsname: "traurig" , Gesichtspfad: "15_traurig.gif" },
  18. {Gesichtsname: "Cool" , Gesichtspfad: "16_Cool.gif" },
  19. {faceName: "kalter Schweiß" , facePath: "17_kalter Schweiß.gif" },
  20. {Gesichtsname: "Verrückt" , Gesichtspfad: "18_Verrückt.gif" },
  21. {faceName: "Gesicht" ,facePath: "19_Gesicht.gif" },
  22. {faceName: "Gesichtsname" , facePath: "20_Gesichtsname.gif" },
  23. {Gesichtsname: "süß" , Gesichtspfad: "21_cute.gif" },
  24. {faceName: "weiße Augen" , facePath: "22_weiße Augen.gif" },
  25. {Gesichtsname: "Arrogant" , Gesichtspfad: "23_Arrogant.gif" },
  26. {Gesichtsname: "Hungrig" , Gesichtspfad: "24_Hungry.gif" },
  27. {faceName: "Gesicht" ,facePath: "25_Gesicht.gif" },
  28. {Gesichtsname: "horror" , Gesichtspfad: "26_horror.gif" },
  29. {faceName: "Schwitzen" , facePath: "27_Schwitzen.gif" },
  30. {faceName: "Gesichtsname" , facePath: "28_Gesichtsname.gif" },
  31. {faceName: "29_29_gif" ,facePath: "29_29_gif.gif" },
  32. {faceName: "Kampf" , facePath: "30_Kampf.gif" },
  33. {faceName: "Schwören" , facePath: "31_Swear.gif" },
  34. {faceName: "Zweifel" , facePath: "32_Zweifel.gif" },
  35. {faceName: "33" ,facePath: "33_33.gif" },
  36. {Gesichtsname: "Gesicht" , Gesichtspfad: "34_Gesicht.gif" },
  37. {Gesichtsname: "Folter" , Gesichtspfad: "35_Folter.gif" },
  38. {faceName: "Gesicht" ,facePath: "36_Gesicht.gif" },
  39. {Gesichtsname: "Schädel" , Gesichtspfad: "37_Schädel.gif" },
  40. {Gesichtsname: "Klopfen" , Gesichtspfad: "38_knock.gif" },
  41. {faceName: "Auf Wiedersehen" , facePath: "39_Auf Wiedersehen.gif" },
  42. {faceName: "Schweiß abwischen" , facePath: "40_Schweiß abwischen.gif" },
  43.              
  44. {faceName: "Nasebohren" ,facePath: "41_Nasebohren.gif" },
  45. {Gesichtsname: "Applaus" , Gesichtspfad: "42_Applaus.gif" },
  46. {faceName: "43_Gesichtsbehandlung" , facePath: "43_Gesichtsbehandlung.gif" },
  47. {faceName: "schlechtes Lächeln" , facePath: "44_schlechtes Lächeln.gif" },
  48. {faceName: "45_45_45_gif" ,facePath: "45_45_gif.gif" },
  49. {faceName: "46_Gesichtsbehandlung" ,facePath: "46_Gesichtsbehandlung.gif" },
  50. {Gesichtsname: "gähnen" , Gesichtspfad: "47_gähnen.gif" },
  51. {Gesichtsname: "verachten" , Gesichtspfad: "48_verachten.gif" },
  52. {Gesichtsname: "Beschwerde" , Gesichtspfad: "49_Beschwerde.gif" },
  53. {faceName: "Ich bin den Tränen nahe" , facePath: "50_Ich bin den Tränen nahe.gif" },
  54. {Gesichtsname: "Insidious" , Gesichtspfad: "51_Insidious.gif" },
  55. {Gesichtsname: "52" , Gesichtspfad: "52_52.gif" },
  56. {faceName: "53" , facePath: "53_53.gif" },
  57. {faceName: "Arm" , facePath: "54_Arm.gif" },
  58. {faceName: "55" ,facePath: "55_55.gif" },
  59. {faceName: "Wassermelone" , facePath: "56_Watermelon.gif" },
  60. {faceName: "beer" ,facePath: "57_beer.gif" },
  61. {Gesichtsname: "Basketball" , Gesichtspfad: "58_Basketball.gif" },
  62. {Gesichtsname: "Ping Pong" , Gesichtspfad: "59_Ping Pong.gif" },
  63. {Gesichtsname: "Hug" , Gesichtspfad: "78_Hug.gif" },
  64. {Gesichtsname: "Handschlag" , Gesichtspfad: "81_Handschlag.gif" },
  65. {faceName: "lächele stolz" , facePath: "lächele stolz.gif" },
  66. {faceName: "Musik hören" , facePath: "Musik hören.gif" }
  67. ]
  68. ,
  69. Init: Funktion (){
  70.          var istShowImg = false ;
  71. $( ".Eingabetext" ).focusout( Funktion (){
  72. $( diese ).parent().css( "Rahmenfarbe" , "#cccccc" );
  73. $( diese ).parent().css( "box-shadow" , "keine" );
  74. $( diese ).parent().css( "-moz-box-shadow" , "keine" );
  75. $( diese ).parent().css( "-webkit-box-shadow" , "keine" );
  76. });
  77. $( ".Eingabetext" ).Fokus( Funktion (){
  78. $( diese ).parent().css( "Rahmenfarbe" , "rgba(19,105,172,.75)" );
  79. $( diese ).parent().css( "box-shadow" , "0 0 3px rgba(19,105,192,.5)" );
  80. $( diese ).parent().css( "-moz-box-shadow" , "0 0 3px rgba(241,39,232,.5)" );
  81. $( diese ).parent().css( "-webkit-box-shadow" , "0 0 3px rgba(19,105,252,3)" );
  82. });
  83. $( ".imgBtn" ).klick( Funktion (){
  84.              wenn (isShowImg == false ) {
  85. istShowImg = true ;
  86. $( diese ).parent().prev().animate({marginTop: "-125px" },300);
  87.                  wenn ($( ".faceDiv" ).children().length==0){
  88.                      für ( 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" ).klick( Funktion (){
  92.                               
  93. istShowImg = falsch ;
  94. $( diese ).parent().animate({marginTop: "0px" },300);
  95. ImgIputHandler.insertAtCursor($( ".Input_text" )[0], "[" $( this ).attr( "title" ) "]" );
  96. });
  97. }
  98. } anders {
  99. istShowImg = falsch ;
  100. $( diese ).parent().prev().animate({marginTop: "0px" },300);
  101. }
  102. });
  103. $( ".postBtn" ).klick( Funktion (){
  104. Alarm($( ".Input_text" ).val());
  105. });
  106. },
  107. insertAtCursor: Funktion (meinFeld, meinWert) {
  108.      wenn (Dokument.Auswahl) {
  109. meinFeld.focus();
  110. sel = Dokument.Auswahl.Bereich erstellen();
  111. sel.text = meinWert;
  112. sel.select();
  113. } anders   wenn (meinFeld.selectionStart || meinFeld.selectionStart == "0" ) {
  114.          var startPos = meinFeld.selectionStart;
  115.          var endPos = meinField.selectionEnd;
  116.          var restoreTop = meinField.scrollTop;
  117. meinFeld.value = meinFeld.value.substring(0, startPos) meinWert meinFeld.value.substring(endPos, meinFeld.value.length);
  118.          wenn (restoreTop > 0) {
  119. meinField.scrollTop = wiederherstellenTop;
  120. }
  121. meinFeld.focus();
  122. meinFeld.selectionStart = startPos meinWert.length;
  123. meinFeld.selectionEnd = startPos meinWert.length;
  124. } anders {
  125. meinFeld.wert = meinWert;
  126. meinFeld.focus();
  127. }
  128. }
  129. }

<<:  Zusammenfassung zum Erlernen von HTML-Tags und Grundelementen

>>:  So erstellen Sie mit Docker von Grund auf ein persönliches SOLO-Blog

Artikel empfehlen

Linux-Befehlszeilenoperation Hochladen und Herunterladen von Dateien in der Baidu-Cloud

Inhaltsverzeichnis 0. Hintergrund 1. Installation...

Informationen zum Fallstrickprotokoll der Vue3-Übergangsanimation

Inhaltsverzeichnis Hintergrund Problemort Weitere...

Schritte zum Erstellen der MHA-Architekturbereitstellung in MySQL

Inhaltsverzeichnis MAH 1. Einführung in die MAH-A...

Methoden des adaptiven Webdesigns (gutes Zugriffserlebnis auf Mobiltelefonen)

1. Fügen Sie dem HTML-Header das Viewport-Tag hin...

So fügen Sie Docker dynamisch Ports hinzu, ohne das Image neu zu erstellen

Manchmal müssen Sie während des Betriebs freigege...

JavaScript-Selektorfunktionen querySelector und querySelectorAll

Inhaltsverzeichnis 1. querySelector fragt ein ein...

Vorgänge der Kommunikation zwischen Docker-Containern und der externen Netzwerkkommunikation

Kommunikation zwischen Containern 1. Netzwerkfrei...

Verwenden einer Falle zum Durchführen einer Umgebungsbereinigung vor dem ordnungsgemäßen Herunterfahren des Docker-Containers

Wie können wir beim Beenden eines laufenden Conta...

Implementierung einer zeitgesteuerten MySQL-Datenbanksicherung (vollständige Datenbanksicherung)

Inhaltsverzeichnis 1. MySQL-Datensicherung 1.1. m...

HTML-Tutorial: Sammlung häufig verwendeter HTML-Tags (6)

Diese eingeführten HTML-Tags entsprechen nicht un...

So installieren Sie ElasticSearch auf Docker in einem Artikel

Inhaltsverzeichnis Vorwort 1. Docker installieren...

Schritte zum Erstellen eines Dateiservers mit Apache unter Linux

1. Über den Dateiserver Wenn Sie in einem Projekt...

Was tun, wenn Sie bei der Installation von MySQL auf einem Mac das ursprüngliche Kennwort vergessen?

Das Vergessen des Passworts ist ein Ärgernis. Was...

Sitemesh-Tutorial – Grundsätze und Anwendungen der Seitendekorationstechnologie

1. Grundlegende Konzepte 1. Sitemesh ist eine Sei...

Lösung für das Datenasymmetrieproblem zwischen MySQL und Elasticsearch

Lösung für das Datenasymmetrieproblem zwischen My...