コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > HTML と CSS を使用して絵文字付きのコメント ボックスを作成する方法のチュートリアル_HTML/Xhtml_Web ページの作成

HTML と CSS を使用して絵文字付きのコメント ボックスを作成する方法のチュートリアル_HTML/Xhtml_Web ページの作成

WBOY
リリース： 2016-05-16 16:36:45
オリジナル
2277 人が閲覧しました

絵文字を含む HTML コメント ボックス。絵文字は Json データを通じて読み込まれ、好みに応じて絵文字を変更できます。このコメントボックスのコードはHTML、CSS、JQコードです。図 1 は元の状態を示し、図 2 は式をクリックしたときに表示される式のリストを示しています。1 つまたは複数を自由に選択できます。実装されたコードを見てみましょう。

写真 1

写真 2

実装されたコード:

htmlコード:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <div class="Main" >
  2. <div class="Input_Box" >
  3. <テキストエリア クラス="Input_text" >テキストエリア>
  4. <div class="faceDiv" > div>
  5. <div class="Input_Foot" > <a クラス="imgBtn" href="javascript:void(0);"> ;a><a クラス="postBtn">OKa > div>
    6. div> div>
css3 コード:

CSS コード

コンテンツをクリップボードにコピーします
  1. .Input_Box {
  2. 幅: 495px;     
  3. 高さ: 160px;     
  4. ボーダー: 1px solid #ccc;     
  5. トランジション: ボーダー 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. ボーダー-半径: 5px;     
  11. 背景色: #fff;     
  12. オーバーフロー: 非表示;     
  13. 位置: 絶対;     
  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>テキストエリア {
  19. 幅: 485px;     
  20. 高さ: 111px;     
  21. パディング: 5px;     
  22. 概要: なし;     
  23. ボーダー: 0px solid #fff;     
  24. サイズ変更: なし;     
  25. フォント: 13px "微软雅黑" 、Arial、Helvetica、サンセリフ;     
  26. -moz-border-radius: 5px;     
  27. -webkit-border-radius: 5px;     
  28. ボーダー-半径: 5px;     
  29. }
  30. .Input_Foot {
  31. 幅: 100%;     
  32. 高さ: 35px;     
  33. ボーダートップ: 1px solid #ccc;     
  34. 背景色: #fff;     
  35. -moz-ボーダー-半径: 0 0 5px 5px ;     
  36. -webkit-ボーダー-半径: 0 0 5px 5px ;     
  37. ボーダー-半径: 0 0 5px 5px ;     
  38. 位置: 絶対;     
  39. }     
  40. .imgBtn {
  41. フロート: 左;     
  42. マージントップ: 8px;     
  43. マージン左: 10px;     
  44. 背景画像: url(imgs.png);     
  45. バックグラウンドリピート: リピートなし;     
  46. 背景位置: 0 -13px;     
  47. 高さ: 18px;     
  48. 幅: 20px;     
  49. カーソル: ポインタ
  50. }
  51. .imgBtn:active {
  52. マージントップ: 9px;     
  53. }
  54. .imgBtn:hover {
  55. 背景位置: 0 -31px
  56. }
  57. .postBtn {
  58. float: rightright;     
  59. フォント: 13px "微软雅黑" 、Arial、Helvetica、サンセリフ;     
  60. 色: #808080;     
  61. パディング: 9px 20px 7px 20px;     
  62. 左枠: 1px solid #ccc;     
  63. カーソル: ポインタ;     
  64. -moz-border-radius: 0 0 5px 0;     
  65. -webkit-border-radius: 0 0 5px 0;     
  66. ボーダー-半径: 0 0 5px 0;     
  67. }     
  68. .postBtn:hover {
  69. カラー: #333;     
  70. 背景色: #efefef;     
  71. }
  72. .postBtn:active {
  73. パディング: 10px 20px 6px 20px;     
  74. }
  75. .faceDiv {
  76. 幅: 500px;     
  77. 高さ: 120px;     
  78. ボーダートップ: 1px solid #ccc;     
  79. 位置: 絶対;     
  80. 背景色: #fff;     
  81. -moz-border-radius: 5px 5px 0 0;     
  82. -webkit-border-radius: 5px 5px 0 0;     
  83. ボーダー-半径: 5px 5px 0 0 ;     
  84. }
  85. .faceDiv>img {
  86. ボーダー: 1px solid #ccc;     
  87. フロート: 左;     
  88. マージン左: -1px;     
  89. マージントップ: -1px;     
  90. 位置: 相対;     
  91. 幅: 24px;     
  92. 高さ: 24px;     
  93. パディング: 3px 3px 3px 3px;     
  94. カーソル: ポインタ;     
  95. }
  96. .faceDiv>img:hover {
  97. 背景色: #efefef;
  98. }
  99. .faceDiv>img:active {
  100. パディング: 4px 3px 2px 3px;
    101. }
JavaScript コード:

JavaScript コード
コンテンツをクリップボードにコピーします
  1. var ImgIputHandler={
  2. facePath:[
  3. {faceName:"smile",facePath:"0_smile.gif"},
  4. <{> {FACENAME: "🎜> 、フェイスパス: " 1_ 撇 撇 .gif " > {faceName:
    5. "色"
  5. ,facePath:"2_色.gif"}, <{> {FACENAME: "Duke"
  6. 、フェイスパス: "3_ Duke .gif" }、<🎜 {faceName:"Deyi"
  7. ,facePath:"4_Deyi.gif"}, >
    8. {faceName:
  8. "シャイ",facePath:"6_shy.gif"},
    9. {faceName:
  9. "黙って", facePath:"7_黙って.gif"},
    10. {faceName:
  10. "泣き"、facePath:"9_crying.gif"}、
    11. {faceName:
  11. "気まずい",facePath:"10_awkward.gif"},
    12. {faceName:
  12. "怒り",facePath:"11_angry.gif"}, <{> {FACENAME:
  13. "いたずら" 、FacePath: "12_ 皮 .gif" }、<🎜 🎜 🎜、 {faceName:
  14. "バーティース",facePath:"13_Bargain.gif"}, {faceName:
  15. "サプライズ",facePath:"14_surprise.gif"}, {faceName:
  16. 「悲しい」,facePath:"15_sad.gif"}, {faceName:
  17. "クール",facePath:"16_cool.gif"}, {faceName:
  18. "冷や汗",facePath:"17_Cold Sweat.gif"}, > {faceName:
    19. "クレイジー"
  19. 、facePath:"18_Crazy.gif"}、
  20. {faceName:"嘔吐",facePath:"19_vomit.gif"},
  21. <{> {FACENAME: "笑顔" 、FacePath: "20_linking .gif" }、
  22. {faceName:"cute",facePath:"21_cute.gif"},
  23. {faceName:"White Eyes",facePath:"22_White Eyes.gif"},
  24. {faceName:"傲慢",facePath:"23_arrogance.gif"},
  25. {faceName:"hunger",facePath:"24_hunger.gif"},
  26. {faceName:"trapped",facePath:"25_trapped.gif"},
  27. {faceName:"ホラー",facePath:"26_Horror.gif"},
  28. {faceName:"スウェット"、facePath:"27_sweat.gif"}、
    29. <{> {FACENAME:
  29. "憨" 、フェイスパス: "28_ 憨笑 .gif" }, <🎜
    30. {faceName:
  30. "GI",facePath:"29_GI.gif"},
    31. {faceName:
  31. 「闘争」,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. "拷問",facePath:"35_torture.gif"}, <{> {FACENAME:
  37. "decline" , FacePath: "36_ 衰退 .gif" }, <🎜 {faceName:
  38. "スケルトン"、facePath:"37_skeleton.gif"}、
  39. <{> {FACENAME: "タップ" 、フェイスパス: "38_ hit .gif" }、<🎜
  40. {faceName:"さようなら",facePath:"39_Goodbye.gif"},
  41. {faceName:「汗を拭く」、facePath:"40_汗を拭く.gif"}、
  42. {faceName:
  43. "鼻をほじる", facePath:"41_鼻をほじる.gif"}, {faceName:
  44. "拍手",facePath:"42_Applause.gif"}, {faceName:
  45. 「とても恥ずかしいです」、facePath:「43_恥ずかしいです。gif」 }、 {faceName:
  46. "悪い笑顔"、facePath:"44_bad smile.gif"}、 {faceName:
  47. "Zuo Hengheng"、facePath:"45_left Hengheng.gif" }、 {faceName:
  48. "Right Heng Heng", facePath:"46_Right Heng Heng.gif" }, {faceName:
  49. "あくび",facePath:"47_yawn.gif"}, {faceName:
  50. "軽蔑",facePath:"48_Contempt.gif"}, {faceName:
  51. 「苦情」,facePath:"49_grievance.gif"}, {faceName:
  52. "泣きそう"、facePath:"50_泣きそう.gif" }、 {faceName:
  53. "insidious",facePath:"51_insidious.gif"}, {faceName:
  54. "Kiss"、facePath:"52_Kiss.gif"}、 <{> {FACENAME:
    55. "怖い"
  55. 、フェイスパス: "53_ <.gif" }、<🎜 {faceName:
    56. "悪い"
  56. ,facePath:"54_Poor.gif"}, {faceName:
    57. "チョップナイフ"
  57. ,facePath:"55_Chop Knife.gif"}, {faceName:
    58. "スイカ"
  58. ,facePath:"56_watermelon.gif"}、
  59. {faceName:"ビール",facePath:"57_beer.gif"},
  60. {faceName:"バスケットボール",facePath:"58_basketball.gif"},
  61. {faceName:"pingpong",facePath:"59_pingpong.gif"},
  62. {faceName:"ハグ",facePath:"78_hug.gif"},
  63. {faceName:"ハンドシェイク",facePath:"81_Handshake.gif"},
  64. {faceName:"ドヤ顔"、facePath:"ドヤ顔.gif"}、
  65. {faceName:"音楽を聴く",facePath:"music.gif を聴く"}
  66. ]
  67. 、 、
  68. 初期化:関数(){
  69. var isShowImg=false;
    70. $(
  70. ".Input_text").focusout(function(){
    71. $(
  71. this).parent().css("border-color", "#cccccc"); $(
    72. this
  72. ).parent().css("box-shadow", "なし"); $(this
    73. ).parent().css(
  73. "-moz-box-shadow", 「なし」); $(this).parent().css(
    74. "-webkit-box-shadow"
  74. , 「なし」); });     
  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(){
  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:関数(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. }
関連ラベル：
html输入表情 html获取文本框的值 表情输入框
ソース：php.cn
前の記事：入力と img_HTML/Xhtml_Web ページの生成を整列させるにはvertical-alignを使用します 次の記事：HTML は title 属性を使用してマウス hover 上にテキストを表示_HTML/Xhtml_Web ページ制作
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
部分的な値の条件でクエリを記録する - SQL スキルの共有 zipcode というテーブルがあり、code という列があります。コード列には、郵便番号のプレフィックスが含まれています (例: 395453302120312)。指定された郵便...
から 2024-04-06 16:01:26
0
1
395
コンソールに入力したテキストが表示されない そこで、React でフォームを構築するために formik を使用しています。いくつかの変更を加えた入力フィールドを含む TextInput コンポーネントを作成しました。 ch...
から 2024-04-04 20:30:28
0
1
404
表セルのコンテナが親セルの高さ全体を占めるようにしてください。 Flexboxを使用せずにコンテンツを垂直方向に整列させようとしています。このユースケースにはいくつかの問題があるため、垂直方向に整列されたテーブルでそれを行おうとしていますが、問...
から 2024-04-04 16:03:18
0
1
404
JavaScriptを使用して表示された形式のデータフィールドに追加の値を追加します 私はこれを達成しようとしています: ユーザーが入力したデータを収集し、それを画面に印刷するフォームを作成したいと考えています。これまでのところ、以下のコード スニペットでほぼ実用的...
から 2024-04-04 15:17:13
0
1
3589
WooCommerce 顧客の支払い方法履歴を取得する 必要な情報、つまり顧客が注文時にこれまでに使用した支払い方法を取得するのに役立つスクリプトを見つけました。 $order=newWC_Order($order_id);$payme...
から 2024-04-04 14:57:11
0
1
428
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート