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

絵文字を含む 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>
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;
}

JavaScript コード:

JavaScript コード

コンテンツをクリップボードにコピーします

1. var ImgIputHandler={
2. facePath:[
3. {faceName:"smile",facePath:"0_smile.gif"},
4. <{> {FACENAME: "🎜> 、フェイスパス: " 1_ 撇 撇 .gif " > {faceName:
"色"
5. ,facePath:"2_色.gif"}, <{> {FACENAME: "Duke"
6. 、フェイスパス: "3_ Duke .gif" }、<🎜 {faceName:"Deyi"
7. ,facePath:"4_Deyi.gif"}, >
{faceName:
8. "シャイ",facePath:"6_shy.gif"},
{faceName:
9. "黙って", facePath:"7_黙って.gif"},
{faceName:
10. "泣き"、facePath:"9_crying.gif"}、
{faceName:
11. "気まずい",facePath:"10_awkward.gif"},
{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. 、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"}、
<{> {FACENAME:
29. "憨" 、フェイスパス: "28_ 憨笑 .gif" }, <🎜
{faceName:
30. "GI",facePath:"29_GI.gif"},
{faceName:
31. 「闘争」,facePath:"30_struggle.gif"},
{faceName:
32. "curse",facePath:"31_curse.gif"},
{faceName:
33. "question",facePath:"32_question.gif"},
{faceName:
34. "Sh",facePath:"33_boo.gif"},
{faceName:
35. "halo",facePath:"34_halo.gif"},
{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. 、フェイスパス: "53_ <.gif" }、<🎜 {faceName:
"悪い"
56. ,facePath:"54_Poor.gif"}, {faceName:
"チョップナイフ"
57. ,facePath:"55_Chop Knife.gif"}, {faceName:
"スイカ"
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. ".Input_text").focusout(function(){
$(
71. this).parent().css("border-color", "#cccccc"); $(
this
72. ).parent().css("box-shadow", "なし"); $(this
).parent().css(
73. "-moz-box-shadow", 「なし」); $(this).parent().css(
"-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 までご連絡ください。

著者別の最新記事

• NullPointerException とは何ですか?どのように修正すればよいですか?
  2024-10-22 09:46:29
• 初心者からプログラマーへ: 旅は C の基礎から始まります
  2024-10-13 13:53:41
• PHP による Web 開発のロックを解除する: 初心者ガイド
  2024-10-12 12:15:51
• C の謎を解く: 新人プログラマーのための明確でシンプルな道
  2024-10-11 22:47:31
• コーディングの可能性を解き放つ: まったくの初心者のための C プログラミング
  2024-10-11 19:36:51
• 内なるプログラマーを解き放つ: まったくの初心者のための C
  2024-10-11 15:50:41
• C で生活を自動化する: 初心者向けのスクリプトとツール
  2024-10-11 15:07:41
• PHP を簡単に: Web 開発の最初のステップ
  2024-10-11 14:21:21
• Python で何でも構築: 創造性を解き放つための初心者ガイド
  2024-10-11 12:59:11
• コーディングの鍵: 初心者のための Python の力を解き放つ
  2024-10-11 12:17:31

最新の問題

cmd で mysql データベースに入るときは中国語を入力できるのですが、テーブル情報を表示すると中国語が表示されません。何が起こっているのでしょうか?

から 1970-01-01 08:00:00

0

0

0

javascript - 関連情報を照会するには ID を入力しますが、未定義と表示されます

から 1970-01-01 08:00:00

0

0

0

エラー メッセージは、対応する入力フィールドの下に表示されません。 HTML、PHPを使用する

から 1970-01-01 08:00:00

0

0

0

cmd で mysql データベースに入るときは中国語を入力できるのですが、テーブル情報を見ると中国語が表示されません。何が起こっていますか? 初心者の方は先生に聞いてください。

から 1970-01-01 08:00:00

0

0

0

入力が HTML に表示されない問題

から 1970-01-01 08:00:00

0

0

0

関連トピック

詳細>

• データベースを削除する方法
• isnumber関数の使用法
• Web 側で上にスライドして次のページを読み込む h5 を実装する方法
• ソート機能の使い方
• デバイスマネージャーにネットワークアダプターがありません
• ポート 445 を閉じるとどのような影響がありますか?
• sortソート関数の使い方
• どのような種類のファイルを識別できるか