css 按空格键对按钮暂停,当按下回车键后,怎么清空回车键的空格,或者模拟发送按键让光标向上?...
问题:当按下回车键发送信息后,光标会跑到第二行,怎么让光标在按下回车键后回到第一行首?
目前想到的两种方案:
第一:回车后,模拟发送按键,让光标向上
第二:清空输入框的所有html,此方法测试无效
求大神能给出代码,谢谢
QQ聊天面板,发送信息,选中联系人
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;
}
$(document).ready(function() {
// 自定义开关,开关表情面板
var onOff=true;
$(".face").click(function() {
// 添加表情面板
var onOff=true;
if(onOff){
// 显示表情框
$(this).after('
var value="";
for(var num=1;num<76;num++){
value='';
$(".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("
![](data:images/banner02.jpg)
");
// 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("");
})
});
周杰伦1
JJ
2016/7/18 13:28:25
这是测试文本这是测试文本这是测试文本这是测试文本
22
蝴蝶日历木要蝴蝶日历木要蝴蝶日历木要蝴蝶日历木要蝴蝶日历木要蝴蝶日历木要蝴蝶日历木要蝴蝶日历木要
发送
css 按空格键对按钮暂停,当按下回车键后,怎么清空回车键的空格,或者模拟发送按键让光标向上?...相关推荐
- Unity 按下空格键,按钮重复相应
转发自:https://blog.csdn.net/qq_36907428/article/details/99671603
- 每日一学33——Unity点击UGUI按钮后,再按空格键会自动触发按钮
在Unity中,当你点击UGUI(Unity GUI)按钮后,再按空格键会自动触发按钮的原因是默认情况下,Unity将空格键映射为UI按钮的"Submit"(提交)操作. 这是因为 ...
- 菜鸟教程:空格键用法大搜罗
空格键是我们日常使用得最多的按键之一,但是它的用法您可未必全部知道.下面就让我们来开始搜罗吧! 1.执行有阴影的选项.一般软件的程序界面都会有一个选项覆盖淡淡的阴影,如果是选择项,空格键的作用就是勾选 ...
- 计算机空格键作用,电脑键盘空格键的使用方法及技巧
电脑键盘空格键的使用方法及技巧平常玩电脑时,电脑键盘中的空格键我们使用最多,但是我们对空格键的作用了解多少,空格键还有哪些用处呢,下面我为大家整理了一些空格键的使用方法和技巧: 1. 空格键控制播放器 ...
- 怎样使用计算机考试,2010年职称计算机考试:怎样使用空格键
你会用空格键吗?听到做个问题很多就会笑,空格键不就是打空格的吗,有谁不会用.其实空格键还有其他的很多用法: 1.网页中翻页.在浏览网页的时候,按一下空格键就是下翻一页,作用与PageDown键相同,在 ...
- MathType破解版中空格键不能用怎么办?
2019独角兽企业重金招聘Python工程师标准>>> 使用MathType数学公式编辑器编辑公式的时候你会注意到MathType空格键不起作用,并且在你每次使用的时候都会弹出一个错 ...
- Android耳机线控-播放/暂停/上一曲/下一曲
起因 前一阵子完成了用有线耳机控制Android手机App的音频播放,具体实现了用耳机线的按键完成播放.暂停.上一曲.下一曲的功能.在网上查阅了一些资料,但不是特别尽如人意,记得有一篇写的很不错的这方 ...
- QLCDNumber制作的超简单计时器,按下空格键暂停。
界面只有一个QLCDNumber.启动程序,开始计时,按下空格键暂停,再次按下空格键继续计时.可以用于练琴计时的朋友. #include "dialog.h" #include & ...
- 电脑技巧:键盘上最长的按键空格键使用技巧!
空格键是所有键盘中的按键最长一个,我们平常使用最多的按键就是在输入文字的时候按下空格键,其实除了空格,空格键还有更多实用的技巧,现在给大家介绍一下. 01 音视频播放器的暂停/播放切换 大多数的音视频 ...
最新文章
- Deep Reading | 从0到1再读注意力机制,此文必收藏!
- 记真实自己,炫精彩人生---《爱记》app使用体验
- OSChina 周一乱弹 —— 把朋友圈的锦鲤全都抓走
- 调用父类方法而非直接设置父类属性
- 编程之美-3.5-最短摘要的生成
- solr4.8.1 + tomcat8 配置
- 打断点是什么意思_英语微课堂:“Give me a break”是什么意思呢?
- 计算机维吾尔语键盘用法,维吾尔语键盘练习软件_西域新疆
- 解决MyEclipse中导入项目的javascript文件中文乱码
- 计算机的性能及评估标准
- 航拍VR全景怎么拍摄制作?航拍VR全景制作软件有哪些?
- 解决WSL2报错(请启用虚拟机平台 Windows 功能并确保在 BIOS 中启用虚拟化[已退出进程,代码为 4294967295])
- hopfileld神经网络_图卷积神经网络
- matlab sisotool工具DEMO
- 手机通过usu共享给电脑网络(win10),电脑变卡的解决办法
- YepEda Allegro Skill学习版
- 想起小时候去乡下二姨家玩
- android重力传感器横竖反,Android重力感应实现方式
- OpenStack Nova hacking和读书笔记
- 字节小程序交易组件使用指南