Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > HTML-Tutorial > Hauptteil

Tutorial zum Erstellen eines Kommentarfelds mit Emoticons mithilfe von HTML und CSS_HTML/Xhtml_Webseitenproduktion

WBOY
Freigeben： 2016-05-16 16:36:45
Original
2260 Leute haben es durchsucht

HTML-Kommentarfeld mit Emoticons. Die Emoticons werden über Json-Daten geladen, und Sie können die Emoticons nach Ihren eigenen Vorlieben ändern. Der Code dieses Kommentarfelds ist HTML-, CSS- und JQ-Code. Abbildung 1 zeigt den Originalzustand und Abbildung 2 zeigt die Liste der Ausdrücke, die angezeigt wird, wenn Sie auf den Ausdruck klicken. Sie können nach Belieben einen oder mehrere auswählen. Werfen wir einen Blick auf den implementierten Code.

Bild 1

Bild 2

Implementierter Code:

　HTML-Code:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  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 Klasse="imgBtn" href="javascript:void(0);"> ;a><a Klasse="postBtn">OKa > div>  
    6. div>   div>  　
CSS3-Code:

CSS-Code

Inhalt in die Zwischenablage kopieren
  1. .Input_Box {     
  2.     Breite: 495px;     
  3.     Höhe: 160px;     
  4.     Rahmen: 1px durchgehend #ccc;     
  5.     Übergang: Grenze 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.     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.     box-shadow: 0 0 5px #ccc;     
  17. }     
  18. .Input_Box>textarea {     
  19.     Breite: 485px;     
  20.     Höhe: 111px;     
  21.     Auffüllung: 5px;     
  22.     Umriss: keine;     
  23.     Rahmen: 0px durchgehend #fff;     
  24.     Größe ändern: keine;     
  25.     Schriftart: 13px "微软雅黑" , Arial, Helvetica, Sans-Serif;     
  26.     -moz-border-radius: 5px;     
  27.     -webkit-border-radius: 5px;     
  28.     Rahmen-Radius: 5px;     
  29. }     
  30. .Input_Foot {     
  31.     Breite: 100 %;     
  32.     Höhe: 35px;     
  33.     Rand oben: 1px durchgehend #ccc;     
  34.     Hintergrundfarbe: #fff;     
  35.     -moz-border-radius: 0 0 5px 5px ;     
  36.     -webkit-border-radius: 0 0 5px 5px ;     
  37.     Rahmen-Radius: 0 0 5px 5px ;     
  38.     Position: absolut;     
  39. }     
  40. .imgBtn {     
  41.     schweben: 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:active {     
  52.     Rand oben: 9px;     
  53. }     
  54. .imgBtn:hover {     
  55.     Hintergrundposition: 0 -31px     
  56. }     
  57. .postBtn {     
  58.     float: rechtsrechts;     
  59.     Schriftart: 13px "微软雅黑" , Arial, Helvetica, Sans-Serif;     
  60.     Farbe: #808080;     
  61.     Auffüllung: 9px 20px 7px 20px;     
  62.     Rand links: 1px durchgehend #ccc;     
  63.     Cursor: Zeiger;     
  64.     -moz-border-radius: 0 0 5px 0;     
  65.     -webkit-border-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:active {     
  73.     Auffüllung: 10px 20px 6px 20px;     
  74. }     
  75. .faceDiv {     
  76.     Breite: 500px;     
  77.     Höhe: 120px;     
  78.     Rand oben: 1px durchgehend #ccc;     
  79.     Position: absolut;     
  80.     Hintergrundfarbe: #fff;     
  81.     -moz-border-radius: 5px 5px 0 0;     
  82.     -webkit-border-radius: 5px 5px 0 0;     
  83.     Rahmen-Radius: 5px 5px 0 0 ;     
  84. }     
  85. .faceDiv>img {     
  86.     Rahmen: 1px durchgehend #ccc;     
  87.     schweben: links;     
  88.     Rand links: -1px;     
  89.     Rand oben: -1px;     
  90.     Position: relativ;     
  91.     Breite: 24px;     
  92.     Höhe: 24px;     
  93.     Auffüllung: 3px 3px 3px 3px;     
  94.     Cursor: Zeiger;     
  95. }     
  96. .faceDiv>img:hover { 
  97.  Hintergrundfarbe: #efefef; 
  98. } 
  99. .faceDiv>img:active { 
  100. Auffüllung: 4px 3px 2px 3px;
    101. } 
　
Javascript-Code:

JavaScript-Code
Inhalt in die Zwischenablage kopieren
  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. "cuss",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. "folter",facePath:"35_torture.gif"}, 
    37.                                                                                                                                                                                                                               ​>
  37. {faceName:"Skeleton",facePath:"37_skeleton.gif"}, 
  38. {FACENAME: „Tap“ , Facepath: „38_ hit .gif“ },
  39. {faceName:"Goodbye",facePath:"39_Goodbye.gif"}, 
  40. {faceName:"wipe Sweat", facePath:"40_wipe Sweat.gif"},
  41.                                             {faceName:
  42. "picking your Nose", facePath:"41_picking your Nose.gif"}, {faceName:
  43. "Applause",facePath:"42_Applause.gif"},  {faceName:
  44. "Es ist mir so peinlich", facePath:"43_Es ist mir peinlich.gif" },  {faceName:
  45. "bad smile", facePath:"44_bad smile.gif"}, {faceName:
  46. "Zuo Hengheng", facePath:"45_left Hengheng.gif" },                                                                                                     {faceName:
  47. "Right Heng Heng", facePath:"46_Right Heng Heng.gif" }, {faceName:
  48. "Yawn",facePath:"47_yawn.gif"},  {faceName:
  49. "Contempt",facePath:"48_Contempt.gif"},  {faceName:
  50. "Grief",facePath:"49_Grief.gif"},  {faceName:
  51. "Ich werde gleich weinen", facePath:"50_Ich werde gleich weinen.gif" },  {faceName:
  52. "insidious",facePath:"51_insidious.gif"},  {faceName:
  53. "Kiss", facePath:"52_Kiss.gif"}, {FACENAME:
    54. „Scared“
  54. , Facepath: „53_ <.gif> }, {faceName:
    55. "Poor"
  55. ,facePath:"54_Poor.gif"},  {faceName:
    56. "Chop Knife"
  56. ,facePath:"55_Chop Knife.gif"},  {faceName:
    57. "Watermelon"
  57. ,facePath:"56_watermelon.gif"}, 
  58. {faceName:"Beer",facePath:"57_beer.gif"}, 
  59. {faceName:"Basketball",facePath:"58_basketball.gif"}, 
  60. {faceName:"pingpong",facePath:"59_pingpong.gif"}, 
  61. {faceName:"Hug",facePath:"78_hug.gif"}, 
  62. {faceName:"Handshake",facePath:"81_Handshake.gif"}, 
  63. {faceName:"smiling smugly", facePath:"smiling smugly.gif"},
  64. {faceName:"Musik hören",facePath:"Musik hören.gif"} 
  65. ]
  66. , ,
  67. Init:Funktion(){
  68.  var isShowImg=false; 
  69. $(".Input_text").focusout(function(){
  70. $(this).parent().css("border-color", "#cccccc");
    71. $(
  71. this).parent().css("box-shadow", "keine"); 
    72. $(
  72. this).parent().css("-moz-box-shadow", "keine"); $(
    73. this
  73. ).parent().css("-webkit-box-shadow", "keine"); });     
  74.         $(".Input_text").focus(function(){     
  75.         $(this).parent().css("border-color",  "rgba(19,105,172,.75)");     
  76.         $(this).parent().css("box-shadow",  "0 0 3px rgba(19,105,192,.5)");     
  77.         $(this).parent().css("-moz-box-shadow", "0 0 3px rgba(241,39,232,.5)");     
  78.         $(this).parent().css("-webkit-box-shadow", "0 0 3px rgba(19,105,252,3)");     
  79.         });     
  80.         $(".imgBtn").click(function(){     
  81.             if(isShowImg==false){     
  82.                 isShowImg=true;     
  83.                 $(this).parent().prev().animate({marginTop:"-125px"},300);     
  84.                                      >                         $(".faceDiv"
  85. ).append(" ImgIputHandler. facePath[i].faceName "" src="face/" ImgIputHandler.facePath[i].facePath "" />"
  86. );                          }     
  87.                     $(".faceDiv>img").click(function(){     
  88.                               
  89.                         isShowImg=false;     
  90.                         $(this).parent().animate({marginTop:"0px"},300 );     
  91.                         ImgIputHandler.insertAtCursor($(".Input_text")[0],"[" $( dieses).attr("title") "]");     
  92.                     });     
  93.                 }     
  94.             }sonst{     
  95.                 isShowImg=false;     
  96.                 $(this).parent().prev().animate({marginTop:"0px"},300);     
  97.             }     
  98.         });     
  99.         $(.postBtn").click(function(){     
  100.             alert($(".Input_text").val());     
  101.         });     
  102.     },     
  103.     insertAtCursor:function(myField, myValue) {     
  104.     if (document.selection) {     
  105.         myField.focus();     
  106.         sel = document.selection.createRange();     
  107.         sel.text = myValue;     
  108.         sel.select();     
  109.     } else if (myField.selectionStart || myField.selectionStart == "0") {     
  110.         var startPos = myField.selectionStart;     
  111.         var endPos = myField.selectionEnd;     
  112.         var restoreTop = myField.scrollTop;     
  113.         myField.value = myField.value.substring(0, startPos)   myValue   myField.value.substring(endPos, myField.value.length);     
  114.         if (restoreTop > 0) {     
  115.             myField.scrollTop = restoreTop;     
  116.         }     
  117.         myField.focus();     
  118.         myField.selectionStart = startPos   myValue.length;     
  119.         myField.selectionEnd = startPos   myValue.length;     
  120.     } else {     
  121.         myField.value  = myValue;     
  122.         myField.focus();     
  123.     }     
  124. }     
  125. }    
Verwandte Etiketten：
html输入表情 html获取文本框的值 表情输入框
Quelle：php.cn
Vorheriger Artikel：Verwenden Sie Vertical-Align, um die Eingabe und die Produktion von img_HTML/Xhtml_Webseiten auszurichten Nächster Artikel：HTML verwendet das Titelattribut, um Text bei der Mausbewegung anzuzeigen_HTML/Xhtml_Webseitenproduktion
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Datensatzabfrage unter Teilwertbedingungen – gemeinsame Nutzung von SQL-Kenntnissen Ich habe eine Tabelle namens zipcode, die eine Spalte namens code enthält. Die Spalte „Cod...
Aus 2024-04-06 16:01:26
0
1
395
Die Konsole zeigt die von mir bereitgestellte Texteingabe nicht an Also verwende ich Formik, um ein Formular in React zu erstellen. Ich habe eine TextInput-K...
Aus 2024-04-04 20:30:28
0
1
404
Stellen Sie sicher, dass der Container der Tabellenzelle die gesamte Höhe der übergeordneten Zelle ausfüllt Ich versuche, den Inhalt vertikal auszurichten, ohne Flexbox zu verwenden, da es bei unser...
Aus 2024-04-04 16:03:18
0
1
404
Fügen Sie mithilfe von Javascript zusätzliche Werte zu den angezeigten Formatdatenfeldern hinzu Ich versuche Folgendes zu erreichen: Ich möchte ein Formular erstellen, das vom Benutzer e...
Aus 2024-04-04 15:17:13
0
1
3589
Rufen Sie den Verlauf der Zahlungsmethoden für WooCommerce-Kunden ab Ich habe ein Skript gefunden, das mir dabei hilft, die benötigten Informationen zu erhalte...
Aus 2024-04-04 14:57:11
0
1
428
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage