如何在jquery中使用“ onkeydown”和“ onclick”？

Question

我的php页面中有以下代码：

<div id="chatarea">
  <div id="jqarea">
    <div class="chatboxcontent"></div>
  </div>
</div>
<div class="chatbox">
  <p>
    <input type="text" name="digit" id="digit" size="50" onkeydown="javascript:checkChatBoxInputKey(event,document.getElementById('digit').value,'<?php echo $cuser ?>')" />
  </p>
  <p>
    <button class="btn" title="send" type="button" onclick="filltxtarea(document.getElementById('digit').value,'<?php echo $cuser ?>')">
      <span>Send</span>
    </button>
  </p>
</div>

在我的javascript文件中，我具有以下功能：

function filltxtarea(desctext, uchat) {
    $(".chatboxcontent").append('<div class=chatboxmessage><span class="chatboxmessagefrom">' + uchat + ': </span><span class="chatboxmessagecontent">' + desctext + '</span></div>');
    $('#digit').val('');
    $('#digit').focus();
    alert("ok2");
    jQuery.ajax({
        type: 'POST',
        url: 'chat.php',
        dataType: 'json',
        data: {
            "newrow": "desctext"
        },
        success: function(response) {
            alert(response);
        }
    })
}

function checkChatBoxInputKey(event, desctext, uchat) {
    if (event.keyCode == 13 && event.shiftKey == 0) {
        alert("ok1");
        filltxtarea(desctext, uchat);
    }
}

该代码适用于onclick但onkeypressdown出现问题。 当我使用Enter键时，它将写在聊天区域中，但是当完成filltxtarea函数时， filltxtarea删除chatboxcontent文本。 为什么会这样呢？

Answer 1

下面的解决方案已经过测试，可以正常工作。

第一：

删除数字的onkeydown事件。 应该是这样的：

 <input type="text" name="digit" id="digit" size="50"  />

删除按钮的onclick事件并设置id属性。

<button class="btn" id="btnClick" title="send" type="button" >

创建隐藏在您的html中的输入以存储$ cuser php var

<input type="hidden" name="cuser" id="cuser" val="<?php echo $cuser ?>" />

将您的JavaScript替换为以下内容：

 $(document).ready(function(){       
    $("#digit").keydown(function(event){
            if (event.keyCode == 13 && event.shiftKey == 0) {
                alert("ok1");
                filltxtarea($("#digit").val());
            }
    });

    $("#btnClick").click(function(){
        filltxtarea($("#digit").val());
    });

    function filltxtarea(desctext) {
        var uchat = $("#cuser").val();
        $(".chatboxcontent").append('<div class=chatboxmessage><span class="chatboxmessagefrom">' + uchat + ': </span><span class="chatboxmessagecontent">' + desctext + '</span></div>');
        $('#digit').val('');
        $('#digit').focus();
        alert("ok2");
        jQuery.ajax({
            type: 'POST',
            url: 'chat.php',
            dataType: 'json',
            data: {
                "newrow": "desctext"
            },
            success: function(response) {
                alert(response);
            }
        })
    }

 });

如有任何疑问，请通知我。

希望对您有所帮助。