html快捷回复横排显示的js怎么写?


现在快捷回复那里是竖着显示的,我想把它改成横着显示怎么改呢?
我觉得要把 <option value="【哈哈哈】">【哈哈哈】</option>
修改成这样 <a>【哈哈哈】</a> ,然后js我也不知道怎么改!
希望大哥能帮忙贴出修改好的全部代码!谢谢了!

代码演示:


 <textarea name="message" title="Ctrl+Enter快捷提交" placeholder="说点什么吧…" style="width:450px;height: 54px;"></textarea>

<style>.btn-select{position:absolute;display:inline-block;width:150px;height:25px;font:14px/20px "Microsoft YaHei";color:#4B4B4B;margin-left:0px;z-index:999;}.btn-select .cur-select{position:absolute;display:block;width:150px;height:25px;line-height:25px;text-indent:10px;z-index:999;border:1px dashed #CCCCCC;border-radius:5px;background:url("img/sj.png") no-repeat 125px center;}.btn-select select{position:absolute;top:0;left:0;width:150px;height:25px;opacity:0;filter:alpha(opacity:0;);font:14px/20px "Microsoft YaHei";color:#f80;}.btn-select select option{text-indent:10px;}#emotion{position:absolute;z-index:999;}</style>


<div class="emoji">
<a class="btn-select" id="btn_select">
<span class="cur-select">添加快捷回复</span>
<select name="emotion" id="emotion">
<option value="" selected="selected">添加快捷回复:</option>
<option value="【哈哈哈】">【哈哈哈】</option>
<option value="【啪啪啪】">【啪啪啪】</option>
<option value="【顶顶顶】">【顶顶顶】</option>
<option value="【去去去】">【去去去】</option>
<option value="【啦啦啦】">【啦啦啦】</option>
<option value="【羊羊羊】">【羊羊羊】</option>
<option value="【哈哈哈】">【哈哈哈】</option>
<option value="【啪啪啪】">【啪啪啪】</option>
<option value="【顶顶顶】">【顶顶顶】</option>
<option value="【去去去】">【去去去】</option>
<option value="【啦啦啦】">【啦啦啦】</option>
<option value="【羊羊羊】">【羊羊羊】</option>
</select>
</a>
</div>


<script>window.onload=function(){
var ds_textarea = document.getElementsByName("message")[0];
var faceList = ["【哈哈哈】", "【啪啪啪】", "【顶顶顶】", "【去去去】", "【啦啦啦】", "【羊羊羊】", "【哈哈哈】", "【啪啪啪】", "【顶顶顶】", "【去去去】", "【啦啦啦】", "【羊羊羊】"];
var optionsList = document.getElementById("emotion").options;

for (var i = 0; i < faceList.length; i++) {
    optionsList[1 + i] = new Option(faceList[i], faceList[i]);
}
document.getElementById("emotion").onchange = function (i) { 
    if (this.selectedIndex != 0) { 
        ds_textarea.value += this.value; 
        var l = ds_textarea.value.length; 
        ds_textarea.focus(); 
        ds_textarea.setSelectionRange(l, l); 
    } 
}
}
</script>

希望效果:
图片描述

web前端开发 HTML JavaScript

lkj510 9 years, 10 months ago

<ul><li><li></ul> 标签

envoyxi answered 9 years, 10 months ago

可以不用 select 吧,就一个 ul 咯,样式处理一下,绑定一下事件。

开牧场的白熊 answered 9 years, 10 months ago

Your Answer