【问题标题】:I want to send message using enter key and new line using shift+enter key for my chat system我想为我的聊天系统使用回车键和换行键发送消息
【发布时间】:2015-11-24 00:51:17
【问题描述】:
 <?php
 session_start();
 if(!isset($_SESSION['user_id']) && empty($_SESSION['user_id'])){
    header("Location:login.php");
 }
 include 'connect.php';
 include 'functions.php';
 $my_id = $_SESSION['user_id'];
 $hash = $_GET['hash'];
 if(isset($_POST['message']) && !empty($_POST['message'])){
 $new_message = $_POST['message'];
 mysql_query("INSERT INTO `messages`       VALUES('','$hash','$my_id','$new_message')");
 header('Location: startcon.php?hash='.$hash);
 }
 ?>
 <link rel='stylesheet' href='css.css' />
 <header>
 <div id="logo"><img src="logo.jpg" height="35px" width="35px"></div>
 <div id="options"><a href='profile.php'>Profile</a>&nbsp &nbsp <a      href="conversation.php">Messenger</a> &nbsp &nbsp <a href="friends.php">Friends</a> &nbsp &nbsp <a href="requests.php">Friend     Requests</a> &nbsp &nbsp <a href='find.php'>Find Friends</a> &nbsp &nbsp <a     href='logout.php'>Logout</a> &nbsp </div>
 </header>
 <div id='outerconversation'>
 <div id="conversationheader"><a href='conversation.php' title='back'><img     src='back.png' height='20px' width='18px' /></a></div>
 <div id="innerconversations">
 <?php
 $message_query = mysql_query("SELECT from_id, message FROM `messages` WHERE      `group_hash`='$hash'");
 while($run_message = mysql_fetch_array($message_query)){
 $from_id = $run_message['from_id'];
 $message = $run_message['message'];
 $user_query = mysql_query("SELECT `email`,`username` FROM `users` WHERE      id='$from_id'");
 $run_user = mysql_fetch_array($user_query);
 $from_email = $run_user['email'];
 $from_username = $run_user['username'];
 echo "<hr color='#008298' /><span style='color: #008298; font-family:      Arial; margin-left: 10px;'>$from_username <span style='color: #BAB9B9; font-     style: italic;'>$from_email</span></span><br/><br/>";
 echo "<span style='color: #008298; font-family: Segoe UI Light; margin-     left: 30px;'><span style='color: #BAB9B9; font-family: Arial; margin-left:      10px;'>says: </span>$message</span><br/><br/>";
}
?>
 </div>
 <form method='POST'>
 <?php
 ?>
 <textarea name='message' placeholder="Type Message..." maxlength="400"      rows='6' cols='145'></textarea>
 <input type='submit' value="Send Message" />
 </form>
 </div>

我正在制作一个聊天系统。我想使用 ENTER 键而不是输入提交按钮和使用 Shift+Enter 的新行来发送消息。我对javascript和jquery没有很强的了解。请创建一个使用回车键发送消息的功能,并使用 shift+enter 键创建新行。

【问题讨论】:

标签: javascript jquery


【解决方案1】:
<form id="chat_form" method='POST'>
    <textarea name='message' placeholder="Type Message..." maxlength="400" rows='6' cols='145' autofocus></textarea>
    <input type='submit' value="Send Message" />
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">

var shiftDown = false;
var chatForm = $("#chat_form");
var messageBox = chatForm.children("textarea");

$(document).keypress(function (e) {
    if(e.keyCode == 13) {
        if(messageBox.is(":focus") && !shiftDown) {
            e.preventDefault(); // prevent another \n from being entered
            chatForm.submit();
        }
    }
});

$(document).keydown(function (e) {
    if(e.keyCode == 16) shiftDown = true;
});

$(document).keyup(function (e) {
    if(e.keyCode == 16) shiftDown = false;
});
</script>

【讨论】:

  • 但是兄弟我发现了一个问题。它不能发送空消息并且它很好但是当我使用 shift+enter 键创建新行并且没有文本时它发送空消息。当我添加新行时它会发送消息。我现在该怎么办?
  • 我不明白为什么它应该这样做。我已经在 chrome 上试过了,效果很好。也许这让您感到困惑,因为表单失去了发送消息的焦点。尝试在 textarea 标签的末尾添加自动对焦。
  • 兄弟谢谢你问题解决了。请为我再做一件事我希望我的滚动始终向下位置,以便当用户想要发送消息时滚动条自动进入底部位置。请问可以吗?
猜你喜欢
  • 1970-01-01
  • 2016-04-13
  • 1970-01-01
  • 2019-05-23
  • 2017-03-03
  • 2015-03-20
  • 1970-01-01
  • 2013-02-02
  • 2023-01-26
相关资源
最近更新 更多