极客观点
项目管理
HarmonyOS
问题：当按下回车键发送信息后，光标会跑到第二行，怎么让光标在按下回车键后回到第一行首？
目前想到的两种方案：
第一：回车后，模拟发送按键，让光标向上
第二：清空输入框的所有html，此方法测试无效
求大神能给出代码，谢谢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<!-- <script src="css/jquery.min.js" type="text/javascript"></script> -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<link href="css/center.css" rel="stylesheet" type="text/css">
<title>QQ聊天面板，发送信息，选中联系人</title>
<style type="text/css">
body{
background: #fff !important;
color:#747474;
}
.textbox{
bottom:85px;
border-top: 1px solid #747474;
width: 741px;
}
button.btn.confirm {
float: right;
margin-right: 15px;
padding: 4px 20px;
background: #4d9be0;
color: #fff;
border: 1px;
cursor: pointer;
}
button.btn.confirm:hover{
background:#2e76b5;
}
textarea{
width:97%;
height:55px;
border: 0;
outline: none;
resize:none;
padding: 8px;
}
/*滚动条垂直方向的宽度*/
::-webkit-scrollbar
{
width: 2px;
}
/* 垂直滚动条的滑动块 */
::-webkit-scrollbar-thumb:vertical {
border-radius: 4px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color:rgba(129,129,129,0.5);
}
.wrap{
width:960px;
height: 555px;
margin:40px auto;
font-size: 14px;
}
.box_left{
width:207px;
height:555px;
border:1px solid #797979;
float: left;
}
.title_left{
background:#f4f4f4;
border-bottom:1px solid #797979;
padding:10px;
}
.content_left{
/*overflow: auto;*/
height: 507px;
/*border: 1px solid #c5c5c5;*/
overflow-y: scroll;
}
.content_left img{
margin-right: 6px;
}
.content_left ul{
padding:6px 6px;
}
.content_left ul li{
line-height: 34px;
padding: 5px;
}
.content_left ul li:hover{
background:#f4f4f4;
}
.user_img{
width:36px;
height: 36px;
border-radius: 2px;
}
.box_right{
width:743px;
height:555px;
border:1px solid #797979;
float: right;
}
.title_right{
padding:10px;
text-align: center;
background:#f4f4f4;
border-bottom: 1px solid #797979;
}
.content_right{
padding:7px 25px;
margin-bottom:30px;
overflow: auto;
height: 355px;
}
.message_time{
text-align: center;
}
.message_left{
position: relative;
margin-bottom:30px
}
.message_left_content{
background:#e8c088;
padding:8px;
color:#fff;
border-radius: 4px;
margin-left: 8px;
position: absolute;
word-wrap: break-word;
min-height: 25px;
}
.message_right{
float:right;
position: relative;
margin-bottom: 30px;
width:80%;
padding-right: 36px;
text-align:right;
}
.message_right img{
/* float: right; */
position: absolute;
right:0;
top:0;
}
.message_right_content{
background: #4e9be0;
padding: 8px;
color: #fff;
border-radius: 5px;
margin-right: 8px;
display: inline-block;
/*position: absolute;*/
right: 38px;
word-wrap:break-word;
word-break:break-all;
}
.face{
bottom:10px;
left:20px;
width:30px;
height:30px;
cursor: pointer;
padding-left: 20px;
}
/*表情插件*/
.comment{width:680px; margin:20px auto; position:relative; background:#fff; padding:20px 50px 50px; border:1px solid #DDD; border-radius:5px;}
.comment h3{height:28px; line-height:28px}
.com_form{width:100%; position:relative}
.input{width:99%; height:60px; border:1px solid #ccc}
.com_form p{height:28px; line-height:28px; position:relative; margin-top:10px;}
span.emotion{width:42px; height:20px; background:url(http://www.16code.com/cache/demos/user-say/img/icon.gif) no-repeat 2px 2px; padding-left:20px; cursor:pointer}
span.emotion:hover{background-position:2px -28px}
.qqFace{margin-top:4px;background:#fff;padding:2px;border:1px #dfe6f6 solid;}
.qqFace table td{padding:0px;}
.qqFace table td img{cursor:pointer;border:1px #fff solid;}
.qqFace table td img:hover{border:1px #0066cc solid;}
#show{width:770px; margin:20px auto; background:#fff; padding:5px; border:1px solid #DDD; vertical-align:top;}
.sub_btn {
position:absolute; right:0px; top:0;
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #e8f0de;
border: solid 1px #538312;
background: #64991e;
background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
background: -moz-linear-gradient(top, #7db72f, #4e7d0e);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.sub_btn:hover {
background: #538018;
background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
background: -moz-linear-gradient(top, #6b9d28, #436b0c);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
.face img{
width: 25px;
}
.facemore{
width:320px;
padding:8px;
border:1px solid #ddd;
overflow: hidden;
top:30px;
left:24px;
position: absolute;
background: #fff;
}
.facemore img{
float: left;
padding-bottom: 3px;
}
.info{
position:relative;
/*padding-top: 8px;*/
}
.message_right .message_right_content img{
position:relative;
}
#textarea{
height:66px;
padding:8px;
overflow: scroll;
outline: none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
// 自定义开关，开关表情面板
var onOff=true;
$(".face").click(function() {
// 添加表情面板
var onOff=true;
if(onOff){
// 显示表情框
$(this).after('<div class="facemore"></div>');
var value="";
for(var num=1;num<76;num++){
value='<a href="javascript:void()"><img src="jQuery-qqFace/arclist/'+num+'.gif"></a>';
$(".facemore").append(value);
}
// 点击表情显示在文本框内
$(".facemore a").click(function(){
$("#textarea").append($(this).html());
//点击表情后，隐藏表情面板
$(".facemore").hide();
});
onOff=false;
}
else{
//删除表情面板
$(".facemore").remove();
onOff=true;
}
});
// 发送按钮
function sent(){
//获取内容；
var $val= $("#textarea").html();
// 判断发送的内容是否为空，为空不发送；
if($val==''){
return
}
else{
// 把内容添加到聊天窗口中
$(".content_right").append("<div class='message_right'><img src='images/banner02.jpg' alt='' class='user_img'><span class='message_right_content'>"+$val+"</span></div>");
// 100毫秒后，内容到底部
setTimeout("$('.content_right').scrollTop( $('.content_right')[0].scrollHeight )",100)
// 清空输入框中的内容
$("#textarea").html('');
}
};
// 当点击发送按钮一发送信息；
$(".confirm").on('click',sent);
// 输入框自动获得焦点；
$("#textarea").focus();
//当按下回车键发送信息；
$("#textarea").keydown(function(ev){
var ev=ev||window.event;
if(ev.keyCode==13) {
sent();
}
})
// 当回车键后光标到输入框顶部；
// $("#textarea").keyup(function(ev){
// var ev=ev||window.event;
// ev.keyCode==37;
// }
// 文本输入框函数；
$(".content_left li").click(function(){
//找要要的属性值
var $val2=$(this).find("span").html();
var $img=$(this).find("img").attr("src");
// 给要添加的地方
$(".title_right").html($val2);
$(".content_right").html("");
})
});
</script>
</head>
<body>
<div class="wrap">
<!-- 左侧部分 -->
<div class="box_left">
<div class="title_left">近期会话</div>
<div class="content_left">
<ul>
<li>
<img src="images/banner01.jpg" alt="" class="user_img"> <span>周杰伦1</span>
</li>
<li >
<img src="images/banner02.jpg" alt="" class="user_img"> <span>JJ</span>
</li>
</ul>
</div>
</div>
<!-- 右侧部分 -->
<div class="box_right">
<div class="title_right">易董君</div>
<!-- 蹭产 -->
<div class="content_right">
<div class="message_time hide">
2016/7/18 13:28:25
</div>
<div class="message_left">
<img src="images/banner02.jpg" alt="" class="user_img">
<span class="message_left_content">这是测试文本这是测试文本这是测试文本这是测试文本</span>
</div>
<div class="message_right">
<img src="images/banner02.jpg" alt="" class="user_img">
<span class="message_right_content">22</span>
</div>
<div class="message_right">
<img src="images/banner02.jpg" alt="" class="user_img">
<span class="message_right_content">蝴蝶日历木要蝴蝶日历木要蝴蝶日历木要蝴蝶日历木要蝴蝶日历木要蝴蝶日历木要蝴蝶日历木要蝴蝶日历木要</span>
</div>
</div>
<div class="textbox">
<div id="textarea" contenteditable="true"></div>
<div class="info">
<span class="face">
<img src="font/face.svg" >
</span>
<button class="btn confirm">发送</button>
</div>
</div>
</div>
</div>
</body>
</html>
