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

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

写真 1

写真 2

実装されたコード:

htmlコード:

XML/HTML コードコンテンツをクリップボードにコピー

<div class="Main" >
<div class="Input_Box" >
<テキストエリアクラス="Input_text" >テキストエリア>
<div class="faceDiv" > div>
<div class="Input_Foot" > <a クラス="imgBtn" href="javascript:void(0);"> ;a><a クラス="postBtn">OKa > div>

div

css3 コード:

CSS コード

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

.Input_Box {
幅: 495px;
高さ: 160px;
ボーダー: 1px solid #ccc;
トランジション: ボーダー linear .2s、 box-shadow linear .5s;
-moz-transition: border linear .2s、-moz-box-shadow linear .5s;
-webkit-transition: border linear .2s、-webkit-box-shadow linear .5s;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
ボーダー-半径: 5px;
背景色: #fff;
オーバーフロー: 非表示;
位置: 絶対;
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;
}
.Input_Box>テキストエリア {
幅: 485px;
高さ: 111px;
パディング: 5px;
概要: なし;
ボーダー: 0px solid #fff;
サイズ変更: なし;
フォント: 13px "微软雅黑" 、Arial、Helvetica、サンセリフ;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
ボーダー-半径: 5px;
}
.Input_Foot {
幅: 100%;
高さ: 35px;
ボーダートップ: 1px solid #ccc;
背景色: #fff;
-moz-ボーダー-半径: 0 0 5px 5px ;
-webkit-ボーダー-半径: 0 0 5px 5px ;
ボーダー-半径: 0 0 5px 5px ;
位置: 絶対;
}
.imgBtn {
フロート: 左;
マージントップ: 8px;
マージン左: 10px;
背景画像: url(imgs.png);
バックグラウンドリピート: リピートなし;
背景位置: 0 -13px;
高さ: 18px;
幅: 20px;
カーソル: ポインタ
}
.imgBtn:active {
マージントップ: 9px;
}
.imgBtn:hover {
背景位置: 0 -31px
}
.postBtn {
float: rightright;
フォント: 13px "微软雅黑" 、Arial、Helvetica、サンセリフ;
色: #808080;
パディング: 9px 20px 7px 20px;
左枠: 1px solid #ccc;
カーソル: ポインタ;
-moz-border-radius: 0 0 5px 0;
-webkit-border-radius: 0 0 5px 0;
ボーダー-半径: 0 0 5px 0;
}
.postBtn:hover {
カラー: #333;
背景色: #efefef;
}
.postBtn:active {
パディング: 10px 20px 6px 20px;
}
.faceDiv {
幅: 500px;
高さ: 120px;
ボーダートップ: 1px solid #ccc;
位置: 絶対;
背景色: #fff;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
ボーダー-半径: 5px 5px 0 0 ;
}
.faceDiv>img {
ボーダー: 1px solid #ccc;
フロート: 左;
マージン左: -1px;
マージントップ: -1px;
位置: 相対;
幅: 24px;
高さ: 24px;
パディング: 3px 3px 3px 3px;
カーソル: ポインタ;
}
.faceDiv>img:hover {
背景色: #efefef;
}
.faceDiv>img:active {
パディング: 4px 3px 2px 3px;

JavaScript コード:

JavaScript コード

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

var ImgIputHandler={
facePath:[
{faceName:"smile",facePath:"0_smile.gif"},
<{> {FACENAME: "🎜> 、フェイスパス: " 1_ 撇撇 .gif " > {faceName:
,facePath:"2_色.gif"}, <{> {FACENAME: "Duke"
、フェイスパス: "3_ Duke .gif" }、<🎜 {faceName:"Deyi"
,facePath:"4_Deyi.gif"}, >
"シャイ",facePath:"6_shy.gif"},
"黙って", facePath:"7_黙って.gif"},
"泣き"、facePath:"9_crying.gif"}、
"気まずい",facePath:"10_awkward.gif"},
"怒り",facePath:"11_angry.gif"}, <{> {FACENAME:
"いたずら" 、FacePath: "12_ 皮 .gif" }、<🎜 🎜 🎜、 {faceName:
"バーティース",facePath:"13_Bargain.gif"}, {faceName:
"サプライズ",facePath:"14_surprise.gif"}, {faceName:
「悲しい」,facePath:"15_sad.gif"}, {faceName:
"クール",facePath:"16_cool.gif"}, {faceName:
"冷や汗",facePath:"17_Cold Sweat.gif"}, > {faceName:
、facePath:"18_Crazy.gif"}、
{faceName:"嘔吐",facePath:"19_vomit.gif"},
<{> {FACENAME: "笑顔" 、FacePath: "20_linking .gif" }、
{faceName:"cute",facePath:"21_cute.gif"},
{faceName:"White Eyes",facePath:"22_White Eyes.gif"},
{faceName:"傲慢",facePath:"23_arrogance.gif"},
{faceName:"hunger",facePath:"24_hunger.gif"},
{faceName:"trapped",facePath:"25_trapped.gif"},
{faceName:"ホラー",facePath:"26_Horror.gif"},
{faceName:"スウェット"、facePath:"27_sweat.gif"}、
"憨" 、フェイスパス: "28_ 憨笑 .gif" }, <🎜
"GI",facePath:"29_GI.gif"},
「闘争」,facePath:"30_struggle.gif"},
"curse",facePath:"31_curse.gif"},
"question",facePath:"32_question.gif"},
"Sh",facePath:"33_boo.gif"},
"halo",facePath:"34_halo.gif"},
"拷問",facePath:"35_torture.gif"}, <{> {FACENAME:
"decline" , FacePath: "36_ 衰退 .gif" }, <🎜 {faceName:
"スケルトン"、facePath:"37_skeleton.gif"}、
<{> {FACENAME: "タップ" 、フェイスパス: "38_ hit .gif" }、<🎜
{faceName:"さようなら",facePath:"39_Goodbye.gif"},
{faceName:「汗を拭く」、facePath:"40_汗を拭く.gif"}、
{faceName:
"鼻をほじる", facePath:"41_鼻をほじる.gif"}, {faceName:
"拍手",facePath:"42_Applause.gif"}, {faceName:
「とても恥ずかしいです」、facePath:「43_恥ずかしいです。gif」 }、 {faceName:
"悪い笑顔"、facePath:"44_bad smile.gif"}、 {faceName:
"Zuo Hengheng"、facePath:"45_left Hengheng.gif" }、 {faceName:
"Right Heng Heng", facePath:"46_Right Heng Heng.gif" }, {faceName:
"あくび",facePath:"47_yawn.gif"}, {faceName:
"軽蔑",facePath:"48_Contempt.gif"}, {faceName:
「苦情」,facePath:"49_grievance.gif"}, {faceName:
"泣きそう"、facePath:"50_泣きそう.gif" }、 {faceName:
"insidious",facePath:"51_insidious.gif"}, {faceName:
"Kiss"、facePath:"52_Kiss.gif"}、 <{> {FACENAME:
、フェイスパス: "53_ <.gif" }、<🎜 {faceName:
,facePath:"54_Poor.gif"}, {faceName:
,facePath:"55_Chop Knife.gif"}, {faceName:
,facePath:"56_watermelon.gif"}、
{faceName:"ビール",facePath:"57_beer.gif"},
{faceName:"バスケットボール",facePath:"58_basketball.gif"},
{faceName:"pingpong",facePath:"59_pingpong.gif"},
{faceName:"ハグ",facePath:"78_hug.gif"},
{faceName:"ハンドシェイク",facePath:"81_Handshake.gif"},
{faceName:"ドヤ顔"、facePath:"ドヤ顔.gif"}、
{faceName:"音楽を聴く",facePath:"music.gif を聴く"}
]
、、
初期化:関数(){
var isShowImg=false;
".Input_text").focusout(function(){
this).parent().css("border-color", "#cccccc"); $(
).parent().css("box-shadow", "なし"); $(this
"-moz-box-shadow", 「なし」); $(this).parent().css(
, 「なし」); });
$(".Input_text").focus(function(){
$(this).parent().css("border-color", "rgba(19,105,172,.75)");
$(this).parent().css("box-shadow", "0 0 3px rgba(19,105,192,.5)");
$(this).parent().css("-moz-box-shadow", "0 0 3px rgba(241,39,232,.5)");
$(this).parent().css("-webkit-box-shadow", "0 0 3px rgba(19,105,252,3)");
});
$(".imgBtn").click(function(){
if(isShowImg==false){
isShowImg=true;
$(this).parent().prev().animate({marginTop:"-125px"},300);
if($(".faceDiv").children().length==0){
for(var i=0;i
$(".faceDiv").append(" ImgIputHandler。 facePath[i].faceName "" src="face/"ImgIputHandler.facePath[i].facePath "" />");
}
$(".faceDiv>img").click(function(){
isShowImg=false;
$(this).parent().animate({marginTop:"0px"},300 );
ImgIputHandler.insertAtCursor($(".Input_text")[0],"[" $( this).attr("title") "]");
});
}
}else{
isShowImg=false;
$(this).parent().prev().animate({marginTop:"0px"},300);
}
});
$(".postBtn").click(function(){
alert($(".Input_text").val());
});
}、
insertAtCursor:関数(myField, myValue) {
if (document.selection) {
myField.focus();
sel = document.selection.createRange();
sel.text = myValue;
sel.select();
} else if (myField.selectionStart || myField.selectionStart == "0") {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
var restoreTop = myField.scrollTop;
myField.value = myField.value.substring(0, startPos) myValue myField.value.substring(endPos, myField.value.length);
if (restoreTop > 0) {
myField.scrollTop = restoreTop;
}
myField.focus();
myField.selectionStart = startPos myValue.length;
myField.selectionEnd = startPos myValue.length;
} else {
myField.value = myValue;
myField.focus();
}
}
}