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

Beispiel zum Überprüfen der Kapazität einer MySQL-Datenbanktabelle

Dieser Artikel stellt die Befehlsanweisungen zum ...

Beispielcode einer benutzerdefinierten Vue-Komponente zur Implementierung bidirektionaler V-Model-Bindungsdaten

Im Projekt werden Sie auf benutzerdefinierte öffe...

Lassen Sie uns über die Leistung von MySQLs COUNT(*) sprechen.

Vorwort Im Grunde verwenden Programmierer am Arbe...

Detaillierte Analyse und Prüfung von SSD-Leistungsproblemen in MySQL-Servern

【Frage】 Wir haben einen HP-Server. Wenn die SSD e...

JavaScript-Interview: So implementieren Sie die Methode zur Array-Abflachung

Inhaltsverzeichnis 1. Was ist Array-Flattening? 2...

Gründe und Lösungen für die Unfähigkeit, Array-Änderungen in Vue2 zu erkennen

Inhaltsverzeichnis Problemumgehung Warum kann ich...

Centos6.9-Installation Mysql5.7.18 Schrittaufzeichnung

Installationsreihenfolge rpm -ivh mysql-community...

5 Möglichkeiten zur Migration von MySQL zu ClickHouse

Die Datenmigration muss von MySQL nach ClickHouse...

So berechnen Sie den Wert von ken_len im MySQL-Abfrageplan

Die Bedeutung von key_len In MySQL können Sie „ex...

Native JS-Implementierung des Ladefortschrittsbalkens

Dieser Artikel zeigt einen Spezialeffekt für dyna...

Spezifische Verwendung interner temporärer MySQL-Tabellen

Inhaltsverzeichnis UNION Tabelleninitialisierung ...

Detaillierte Erläuterung der Ideen zur Fehlerbehebung bei PHP+nginx-Dienstfehlern 500 502

Überblick Wenn beim Zugriff auf einen Onlinediens...

Upgrade des Windows Server 2008R2-Dateiservers auf Windows Server 2016

Die Benutzerorganisation verfügt über zwei Window...

Erstellen Sie mit Node.JS ein Echtzeit-Warnsystem für Unwetter

Inhaltsverzeichnis Vorwort: Schritt 1: Finden Sie...

Detaillierte Erklärung zum Remotezugriff auf die MySQL-Datenbank über Workbench

Vorwort Workbench ist auf einem Computer installi...