当用户按下回车键时,自动在text区域/text中插入消息
Auto insert message in textarea/text when user(s) hit the enter
我正在制作一个简单的聊天室,我在index.php中有一个文本区域,用户可以在其中输入他/她的消息。我使用链接来传递ajax中的值,而不是按钮。在我的情况下,我通常会点击"发送"链接来传递值。但是,当用户点击输入他/她的消息并自动显示给div时,我该如何解决这个问题?
**
索引.php
**
<form name="form1" onsubmit="submitAjaxQuery(event)" >
<textarea name="msg"></textarea><br/>
<a href="#" onclick="submitChat()"> Send </a>
</form>
function submitChat(){
if( form1.msg.value ==''){
alert("All fiels are mandatory");
return;
}
form1.uname.readonly=true;
form1.uname.style.border='none';
var uname= form1.uname.value;
var msg = form1.msg.value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status ==200)
{
document.getElementById('chatlogs').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET','insert.php?uname='+uname+'&msg='+msg,true);
xmlhttp.send();
}
嗨,你可以这样做。
$("textarea").keydown(function(e)
{
if (e.keyCode == 13)
{
submit();
}
}
通常,要做的是添加一个"onKeyDown"处理程序,查看是哪个键触发了事件,如果该键是作为回车的幻数13
,则执行提交。看起来像这样:
var onKeyDown = function(e) {
if (e.which == 13) {
e.preventDefault();
submitChat();
}
};
$("#id-to-text-area").on("keydown", onKeyDown);
**Add Handle() function onkeypress event**
<form name="form1" onsubmit="submitAjaxQuery(event)" >
<textarea name="msg"></textarea><br/>
<a href="#" onclick="submitChat()" onkeypress="handle()"> Send </a>
</form>
function handle(e){ {
if(e.which == 13) {
if( form1.msg.value ==''){
alert("All fiels are mandatory");
return;
}
form1.uname.readonly=true;
form1.uname.style.border='none';
var uname= form1.uname.value;
var msg = form1.msg.value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status ==200)
{
document.getElementById('chatlogs').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET','insert.php?uname='+uname+'&msg='+msg,true);
xmlhttp.send();
}
}
请这样尝试,
$("textarea").keypress(function(event){
var p = event.which;
if(p==13){ // Enter key press
// Your code goes here
}
});
您可以将此代码用于enter事件。这里js小提琴
html代码
<form name="form1" onsubmit="submitAjaxQuery(event)" >
<textarea id="area" name="msg"></textarea><br/>
<a href="#" onclick="submitChat()"> Send </a>
</form>
javascript
$("#area").keypress(function(e) {
if(e.which == 13) {
submitChat();
alert('message submit!');
}
});
更新
您可能需要添加jquery库。。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
$("textarea").keypress(function(event) {
if (event.which == 13) {
event.preventDefault();
$("form").submit();
}
});
您可以尝试检测何时在[name=msg]文本区域内按下返回键。这是在页面底部添加的普通JS(但您也可以使用jQuery)。
<script type="text/javascript">
function listenKeys(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.name=="msg")) {
// RETURN KEY DETECTED IN msg, EXECUTE YOUR CODE HERE
}
}
document.onkeypress = listenKeys;
</script>
希望它能帮助
相关文章:
- 当用户按下回车键时,自动在text区域/text中插入消息
- <text区域>在我的html中包含event.keycode==13之后,wrap就不起作用了
- 在node.jsexpress应用程序中,req.body没有得到<text区域>价值
- text区域换行jquery
- Don't在设置<text区域>
- 将文本插入<text区域>
- 多重<text区域>具有字符计数器+行限制器的字段
- text区域高度请求滚动高度流问题
- 如何获得<text区域>使用jQuery动态获取值
- 正在获取<text区域>jQuery的值未按预期工作
- 防止<text区域>避免失去焦点以保持移动键盘
- 是否可以在`<text区域>`
- 如何在多行<text区域>
- <text区域>字符限制
- 正在恢复<text区域>重新加载页面上的滚动条位置
- 在<text区域>使用JavaScript
- AngularJS-动态创建<text区域>使用ngSanitize不会't显示(其他元素显示)
- 滚动视图中text区域的滚动文本
- 如何添加<text区域>使用jquery的before按钮
- 如何在<text区域>标签