Ajax выполнить функцию по ENTERу

333

18 января 2018, 19:59

Здравствуйте, есть небольшой чат-бот, все работет супер, но сообщение отправляются только при клике по кнопке, а на клавишу ентер реакции ноль.

Уже два часа пробую всякие варинаты из гугла ничего не помогает (((.

Честно говоря в скриптах, не очень ((( Выручайте пожалуйста, вот код:

<div id="controls">
    <input id="textbox" name="sendtext" class="controls-elements" placeholder="Напишите сообщение и нажмите Enter" type="text"></input>
    <button id="send" onclick="buttonOtprav()" class="controls-elements" type="submit">Отправить</button>
</div>

а это скрипт:

var username = "";
function send_message(conv,message){
    if (conv.length > 4) {
            conv = conv + "<br>";
    }
    $("#converse").html(conv +"<div class='message-box left-img'><div class='picture'><img src='/my2/a.png' title='user name'></div><div class='mes'><span class = 'current-msg'>" + "<span id='chat-bot'>Бот: </span><p>" + message + "</p></span></div></div>");
    $(".current-msg").hide();
    $(".current-msg").delay(500).fadeIn();
    $(".current-msg").removeClass("current-msg");
    }
function get_username(conv){
    send_message(conv,"Привет, могу ли я чем то помочь?");
}
function ai(conv,message){
    if (username<4) {
        username = message;
        send_message(conv,"Hi, "+ username + ". How are you?");
    }
    else{
        // $("#send").click(function(){
            $.get("getresponse.php", {q:message}, function(data, status){
                // alert("Data: " + data + "\nStatus: " + status);
                send_message(conv,data);
            });
        // });       
    }
}
$(function(){
    var open = false;
    var conv = $("#converse").html();
    get_username(conv);
    $("#send").click(function(){
        var usermsg = $("#textbox").val();
        conv = $("#converse").html();
        console.log(conv.length);
        if (usermsg != "") {
            $("#textbox").val("");
            if (conv.length > 4) {
                conv = conv + "<br>";
            }
            $("#converse").html(conv + "<div class='message-box right-img'><div class='picture'><img src='/my2/user.png' title='user name'></div><div class='mes'><span><span id='chat-user'>Пользователь: </span><p>" + usermsg + "</p></span></div></div>");
            $("#converse").scrollTop($("#converse").prop("scrollHeight"));
            conv = $("#converse").html();
            ai(conv,usermsg);
        }
    });
    $("#chat-button").click(function(){
        $("#chat-box").animate({"right":"0px"});    
    });
    $("#cancel").click(function(){
        $("#chat-box").animate({"right":"-300px"});
    });
});

Пример можно увидеть здесь http://webcredit.info/ Помогите пожалуйста! Очень нужно исправить!

Answer 1

document.forms.onkeyup = function(event) { // слушаете событие onkeyup  формы 
  if (event.keyCode == 13) { //  коли enter - дёргаете вашу штатную функцию отправки 
    buttonOtprav(); 
  } 
}; 
 
function buttonOtprav() {  
  console.log('enter is firing'); 
  event.preventDefault(); 
}

<form> 
  <input type="text" placeholder="try me with enter" /> 
  <button id="send" onclick="buttonOtprav()" class="controls-elements" type="submit">Отправить</button> 
</form>

Answer 2

Вариант в лоб: подпишитесь на событие keypress или keydown у поля ввода и реагируйте на нажатие Enter.

Вариант правильный:

Превратите ваш див в нормальную форму:

<form name="sendtext" action="#">
    <input name="text" placeholder="Напишите сообщение и нажмите Enter" type="text"></input>
    <button>Отправить</button>
</form>

Подпишитесь на событие submit:

document.forms.sendtext.addEventListener("submit", function (e) {
  e.preventDefault();
  var text = this.elements.text.value;
  // тут отправляете данные
});

Уберите аналогичный обработчик с кнопки - по умолчанию нажатие на кнопку вызывает submit формы - и вас этот вариант устраивает.

Рабочий пример:

document.forms.sendtext.addEventListener("submit", function (e) { 
  e.preventDefault(); 
 
  var text = this.elements.text.value; 
  console.log(text); 
});

<form name="sendtext" action="#"> 
<input name="text" placeholder="Напишите сообщение и нажмите Enter" type="text"></input> 
<button>Отправить</button> 
</form>