我想使用enter键和新行使用shift + enter键为我的聊天系统发送消息

时间:2015-08-29 13:35:45

标签: javascript jquery

 <?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的强大知识。请使用enter键发送消息并使用shift + enter键创建新行。

1 个答案:

答案 0 :(得分:2)

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