communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > Tutoriel sur la création d'une zone de commentaire avec des émoticônes en utilisant la production de pages HTML et CSS_HTML/Xhtml_Web

Tutoriel sur la création d'une zone de commentaire avec des émoticônes en utilisant la production de pages HTML et CSS_HTML/Xhtml_Web

WBOY
Libérer： 2016-05-16 16:36:45
original
2277 Les gens l'ont consulté

Zone de commentaire HTML avec émoticônes. Les émoticônes sont chargées via les données Json et vous pouvez modifier les émoticônes selon vos propres préférences. Le code de cette zone de commentaire est du code HTML, CSS et JQ. La figure 1 montre l'état d'origine et la figure 2 montre la liste des expressions qui apparaît lorsque vous cliquez sur l'expression. Vous pouvez en sélectionner une ou plusieurs à volonté. Jetons un coup d'œil au code implémenté.

Photo 1

Photo 2

Code implémenté :

　code html :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <div classe="Principal" > 
  2.  <div class="Input_Box" > 
  3.  <textarea class="Input_text" >textarea> 
  4.  <div classe="faceDiv" > div> 
  5.  <div class="Input_Foot" > <une classe="imgBtn" href="javascript:void(0);"> ;a><a classe="postBtn">OKa > div>
    6.  
  6. div> 
    7.  
  7. div> 
　
code css3 :

Code CSS
Copier le contenu dans le presse-papiers
  1. .Input_Box {     
  2.     largeur : 495px ;     
  3.     hauteur : 160px ;     
  4.     bordure : 1px solide #ccc;     
  5.     transition : bordure linéaire .2s, box-shadow linéaire .5s ;     
  6.     -moz-transition : frontière linéaire .2s, -moz-box-shadow linéaire .5s ;     
  7.     -webkit-transition : frontière linéaire .2s, -webkit-box-shadow linéaire .5s ;     
  8.     -moz-bordure-rayon : 5px;     
  9.     -webkit-bordure-rayon : 5px ;     
  10.     bordure-rayon : 5px ;     
  11.     couleur de fond : #fff ;     
  12.     débordement : caché ;     
  13.     position : absolue ;     
  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.     largeur : 485px ;     
  20.     hauteur : 111px ;     
  21.     rembourrage : 5px ;     
  22.     contour : aucun ;     
  23.     bordure : 0px solide #fff;     
  24.     redimensionner : aucun ;     
  25.     police : 13px "微软雅黑" , Arial, Helvetica, sans-serif;     
  26.     -moz-bordure-rayon : 5px;     
  27.     -webkit-bordure-rayon : 5px ;     
  28.     bordure-rayon : 5px ;     
  29. }     
  30. .Input_Foot {     
  31.     largeur : 100 % ;     
  32.     hauteur : 35px ;     
  33.     bordure-haut : 1px solide #ccc;     
  34.     couleur de fond : #fff ;     
  35.     -moz-bordure-radius : 0 0 5px 5px ;     
  36.     -webkit-bordure-radius : 0 0 5px 5px ;     
  37.     bordure-rayon : 0 0 5px 5px ;     
  38.     position : absolue ;     
  39. }     
  40. .imgBtn {     
  41.     flotteur : gauche ;     
  42.     marge supérieure : 8px ;     
  43.     marge gauche : 10px ;     
  44.     image d'arrière-plan : url(imgs.png);     
  45.     répétition d'arrière-plan : pas de répétition ;     
  46.     position d'arrière-plan : 0 -13px ;     
  47.     hauteur : 18px ;     
  48.     largeur : 20px ;     
  49.     curseur : pointeur     
  50. }     
  51. .imgBtn:active {     
  52.     marge supérieure : 9px ;     
  53. }     
  54. .imgBtn:hover {     
  55.     position d'arrière-plan : 0 -31px     
  56. }     
  57. .postBtn {     
  58.     flotteur : droitedroite ;     
  59.     police : 13px "微软雅黑" , Arial, Helvetica, sans-serif;     
  60.     couleur : #808080 ;     
  61.     rembourrage : 9px 20px 7px 20px;     
  62.     bordure-gauche : 1px solide #ccc;     
  63.     curseur : pointeur ;     
  64.     -moz-bordure-radius : 0 0 5px 0 ;     
  65.     -webkit-bordure-radius : 0 0 5px 0 ;     
  66.     bordure-rayon : 0 0 5px 0 ;     
  67. }     
  68. .postBtn:hover {     
  69.     couleur : #333 ;     
  70.     couleur de fond : #efefef;     
  71. }     
  72. .postBtn:active {     
  73.     rembourrage : 10px 20px 6px 20px;     
  74. }     
  75. .faceDiv {     
  76.     largeur : 500px ;     
  77.     hauteur : 120px ;     
  78.     bordure-haut : 1px solide #ccc;     
  79.     position : absolue ;     
  80.     couleur de fond : #fff ;     
  81.     -moz-bordure-radius : 5px 5px 0 0 ;     
  82.     -webkit-bordure-rayon : 5px 5px 0 0 ;     
  83.     bordure-rayon : 5px 5px 0 0 ;     
  84. }     
  85. .faceDiv>img {     
  86.     bordure : 1px solide #ccc;     
  87.     flotteur : gauche ;     
  88.     marge gauche : -1px ;     
  89.     marge supérieure : -1px ;     
  90.     position : relative ;     
  91.     largeur : 24px ;     
  92.     hauteur : 24px ;     
  93.     rembourrage : 3px 3px 3px 3px;     
  94.     curseur : pointeur ;     
  95. }     
  96. .faceDiv>img:hover { 
  97.  couleur de fond : #efefef; 
  98. } 
  99. .faceDiv>img:active { 
  100. rembourrage : 4px 3px 2px 3px;
    101. } 
　
Code Javascript :

Code JavaScript
Copier le contenu dans le presse-papiers
  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"},  {FACENAME : "Larmes"
    8. , FacePath :
  8. "5_ 泪 泪 .gif" }, {faceName:"timide"
    9. ,facePath:
  9. "6_shy.gif"},  {faceName:"Tais-toi"
    10. , facePath:
  10. "7_Shut up.gif"}, {faceName:"pleurer"
    11. , facePath:
  11. "9_crying.gif"}, {faceName:"Gênant"
    12. ,facePath:
  12. "10_awkward.gif"},  {faceName:"en colère"
    13. ,facePath:
  13. "11_angry.gif"},  {FACENAME : "Vilain" , FacePath :
  14. "12_ 皮 .gif" }, {faceName:"Barteeth",facePath:
  15. "13_Bargain.gif"}, {faceName:"surprise",facePath:
  16. "14_surprise.gif"},  {faceName:"triste",facePath:
  17. "15_sad.gif"},  {faceName:"Cool",facePath:
  18. "16_cool.gif"},  {faceName:"Sueur froide",facePath:
  19. "17_Sueur froide.gif"}, > {faceName:"Crazy",facePath:
    20. "18_Crazy.gif"
  20. }, 
  21. {faceName:"vomit",facePath:"19_vomit.gif"}, 
  22. {FACENAME : "Souriant" , FacePath : "20_linking .gif" },
  23. {faceName:"mignon",facePath:"21_cute.gif"}, 
  24. {faceName:"Yeux blancs",facePath:"22_Yeux blancs.gif"}, 
  25. {faceName:"arrogance",facePath:"23_arrogance.gif"}, 
  26. {faceName:"faim",facePath:"24_hunger.gif"}, 
  27. {faceName:"trapped",facePath:"25_trapped.gif"}, 
  28. {faceName:"Horreur",facePath:"26_Horror.gif"}, 
  29. {faceName:"sueur", facePath:"27_sweat.gif"},
    30. {FACENAME :
  30. "憨" , facepath : "28_ 憨 笑 .gif" },
    31. {faceName:
  31. "GI",facePath:"29_GI.gif"}, 
    32. {faceName:
  32. "struggle",facePath:"30_struggle.gif"}, 
    33. {faceName:
  33. "cuss",facePath:"31_curse.gif"}, 
    34. {faceName:
  34. "question",facePath:"32_question.gif"}, 
    35. {faceName:
  35. "Sh",facePath:"33_boo.gif"}, 
    36. {faceName:
  36. "halo",facePath:"34_halo.gif"}, 
    37. {faceName:
  37. "torture",facePath:"35_torture.gif"},  {FACENAME :
  38. "décliner" , FacePath : "36_ 衰 .gif" }, {faceName :
  39. "Squelette",facePath :"37_skeleton.gif"}, 
  40. {FACENAME : "Appuyez" , Facepath : "38_ hit .gif" },
  41. {faceName:"Au revoir",facePath:"39_Goodbye.gif"}, 
  42. {faceName:"wipe sweat", facePath:"40_wipe sweat.gif"},
  43.                                             {faceName:
  44. "se curer le nez", facePath:"41_se curer le nez.gif"}, {faceName:
  45. "Applaudissements",facePath:"42_Applause.gif"},  {faceName:
  46. "Je suis tellement gêné", facePath:"43_Je suis gêné.gif" },  {faceName:
  47. "mauvais sourire", facePath:"44_bad smile.gif"}, {faceName:
  48. "Zuo Hengheng", facePath:"45_left Hengheng.gif" },                                                                                                             { faceName :
  49. "Right Heng Heng", facePath :"46_Right Heng Heng.gif" }, {faceName:
  50. "Bâillement",facePath:"47_yawn.gif"},  {faceName:
  51. "Mépris",facePath:"48_Contempt.gif"},  {faceName:
  52. "Deuil",facePath:"49_Grief.gif"},  {faceName:
  53. "Je suis sur le point de pleurer", facePath:"50_Je suis sur le point de pleurer.gif" },  {faceName:
  54. "insidious",facePath:"51_insidious.gif"},  {faceName:
  55. "Kiss", facePath:"52_Kiss.gif"}, {FACENAME :
    56. "Peur"
  56. , Facepath : "53_ <.gif> }, {faceName:
    57. "Pauvre"
  57. ,facePath:"54_Poor.gif"},  {faceName:
    58. "Chop Knife"
  58. ,facePath:"55_Chop Knife.gif"},  {faceName:
    59. "Pastèque"
  59. ,facePath:"56_watermelon.gif"}, 
  60. {faceName:"Bière",facePath:"57_beer.gif"}, 
  61. {faceName:"Basketball",facePath:"58_basketball.gif"}, 
  62. {faceName:"pingpong",facePath:"59_pingpong.gif"}, 
  63. {faceName:"Câlin",facePath:"78_hug.gif"}, 
  64. {faceName:"Handshake",facePath:"81_Handshake.gif"}, 
  65. {faceName:"sourire suffisant", facePath:"sourire suffisant.gif"},
  66. {faceName:"Écouter de la musique",facePath:"Écouter de la musique.gif"} 
  67. ]
  68. , ,
  69. Init :fonction(){
  70.  var isShowImg=false; 
  71. $(".Input_text").focusout(fonction(){
  72. $(this).parent().css("border-color", "#cccccc");
    73. $(
  73. this).parent().css("box-shadow", "aucun"); 
    74. $(
  74. this).parent().css("-moz-box-shadow", "aucun"); $(
    75. ce
  75. ).parent().css("-webkit-box-shadow", "aucun"); });     
  76.         $().Input_text").focus(fonction(){     
  77.         $(this).parent().css("border-color",  "rgba(19,105,172,.75)");     
  78.         $(this).parent().css("box-shadow",  "0 0 3px rgba(19,105,192,.5)");     
  79.         $(this).parent().css("-moz-box-shadow", "0 0 3px rgba(241,39,232,.5)");     
  80.         $(this).parent().css("-webkit-box-shadow", "0 0 3px rgba(19,105,252,3)");     
  81.         });     
  82.         $(".imgBtn").cliquez(fonction(){     
  83.             if(isShowImg==false){     
  84.                 isShowImg=true;     
  85.                 $(this).parent().prev().animate({marginTop:"-125px"},300);     
  86.                 if($(".faceDiv").children().length==0){
  87.                     pour(var i=0;i
  88.                         $(".faceDiv").append(" ImgIputHandler. facePath[i].faceName "" src="face/" ImgIputHandler.facePath[i].facePath "" />");     
  89.                     }     
  90.                     $(".faceDiv>img").click(fonction(){     
  91.                               
  92.                         isShowImg=false;     
  93.                         $(this).parent().animate({marginTop:"0px"},300 );     
  94.                         ImgIputHandler.insertAtCursor($(".Input_text")[0],"[" $( ce).attr("titre") "]");     
  95.                     } );     
  96.                 }     
  97.             }autre{     
  98.                 isShowImg=false;     
  99.                 $(this).parent().prev().animate({marginTop:"0px"},300 );     
  100.             }     
  101.         });     
  102.         $().postBtn").click(fonction(){     
  103.             alerte($().Input_text").val());     
  104.         });     
  105.     },     
  106.     insertAtCursor :fonction(myField, myValue) {     
  107.     si (document.selection) {     
  108.         myField.focus();     
  109.         sel = document.selection.createRange();     
  110.         sel.text = myValue ;     
  111.         sel.select();     
  112.     } else if (myField.selectionStart || myField.selectionStart == "0") {     
  113.         var startPos = myField.selectionStart;     
  114.         var endPos = myField.selectionEnd;     
  115.         var restoreTop = myField.scrollTop;     
  116.         myField.value = myField.value.substring(0, startPos)   myValue   myField.value.substring(endPos, myField.value.length);     
  117.         if (restoreTop > 0) {     
  118.             myField.scrollTop = restoreTop ;     
  119.         }     
  120.         myField.focus();     
  121.         myField.selectionStart = startPos   myValue.length;     
  122.         myField.selectionEnd = startPos   myValue.length;     
  123.     } autre {     
  124.         myField.value  = myValue ;     
  125.         myField.focus();     
  126.     }     
  127. }     
  128. }    
Étiquettes associées：
html输入表情 html获取文本框的值 表情输入框
source：php.cn
Article précédent：Utilisez l'alignement vertical pour aligner l'entrée et la production de pages img_HTML/Xhtml_Web Article suivant：HTML utilise l'attribut title pour afficher le texte au survol de la souris_HTML/Xhtml_Web production de pages
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Requête d'enregistrement dans des conditions de valeur partielle - Partage de compétences SQL J'ai une table appelée code postal qui comporte une colonne appelée code. La colonne Code ...
Depuis 2024-04-06 16:01:26
0
1
395
La console n'affiche pas la saisie de texte que je fournis J'utilise donc formik pour créer un formulaire dans React. J'ai créé un composant TextInpu...
Depuis 2024-04-04 20:30:28
0
1
404
Assurez-vous que le conteneur de la cellule du tableau remplit toute la hauteur du parent J'essaie d'aligner verticalement le contenu sans utiliser Flexbox, car il y a quelques pro...
Depuis 2024-04-04 16:03:18
0
1
404
Ajoutez des valeurs supplémentaires aux champs de données de format affichés à l'aide de javascript J'essaie d'y parvenir : je souhaite créer un formulaire qui collecte les données saisies p...
Depuis 2024-04-04 15:17:13
0
1
3589
Récupérer l'historique des modes de paiement pour les clients WooCommerce J'ai trouvé un script qui m'aide à obtenir les informations dont j'ai besoin : les méthode...
Depuis 2024-04-04 14:57:11
0
1
428
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal