javascript - html快捷回复横排显示的js怎么写?
天蓬老师
天蓬老师 2017-04-10 15:27:15
[JavaScript讨论组]

现在快捷回复那里是竖着显示的,我想把它改成横着显示怎么改呢?
我觉得要把<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>


<p 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>
</p>


<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>

希望效果:

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全部回复(2)
迷茫

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

迷茫

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号