Question

如果按Enter键，我有一个发送消息功能。但是，我也为发送消息创建了一个按钮，如果我调用此函数，则消息不会发送，我添加了click事件。

  function inputKeyDown(event, inputBox) {
    // Submit on enter key, dis-allowing blank messages
    if (event.keyCode === 13 && inputBox.value || event.onclick && inputBox.value) {            

      // Send the user message
      Api.sendRequest(inputBox.value, context);

      // Clear input box for further messages
      inputBox.value = '';
      Common.fireEvent(inputBox, 'input');
    }
  }

我尝试在此if条件中添加一个单击事件并且不起作用，我使用一个警报事件测试该按钮并且在我单击时工作正常。

检查我的HTML：

<label for="textInput" class="inputOutline">
          <input id="textInput" class="input responsive-column"
           placeholder="Type something" type="text"
           onkeydown="ConversationPanel.inputKeyDown(event, this)">

            <button class="Testbutton" onclick="ConversationPanel.inputKeyDown(event, this)">
              <i class="icon send"></i>
            </button>

 </label>

我的函数onkeydown工作正常，可以发送消息。但是当我更改了函数时添加了一个onclick事件，我的按钮不起作用。我使用alert调试了按钮并且工作正常。

我做错了什么？有人可以帮帮我。

Answer 1

创建一个新函数sendMessage，然后从不同的事件中调用它。

var inputBox = document.getElementById('textInput');

// for input keydown
function inputKeyDown(event) {
  // Submit on enter key, dis-allowing blank messages
  if (event.keyCode === 13) {
    sendMessage();
  }
}

// for button click
function sendMessage() {
  if (inputBox.value) {
    // Send the user message
    console.log(inputBox.value);
    Api.sendRequest(inputBox.value, context);

    // Clear input box for further messages
    inputBox.value = '';
    Common.fireEvent(inputBox, 'input');
  }
}

<label for="textInput" class="inputOutline">
  <input id="textInput" class="input responsive-column"
   placeholder="Type something" type="text"
   onkeydown="inputKeyDown(event)">
  <button class="Testbutton" onclick="sendMessage()">
    <i class="icon send"></i>Send
  </button>
</label>

Answer 2

if条件需要调整。要检查事件是否为点击，您需要使用event.type === 'click'。此外，只需检查inputBox.value一次就可以简化它。我修改了您的inputKeyDown功能：

function inputKeyDown(event, inputBox) {
    // Submit on enter key, dis-allowing blank messages
    if (inputBox.value && event.keyCode === 13 || event.type === 'click') {            

      // Send the user message
      Api.sendRequest(inputBox.value, context);

      // Clear input box for further messages
      inputBox.value = '';
      Common.fireEvent(inputBox, 'input');
    }
  }

此外，您需要将input元素作为onclick处理程序的第二个参数传递：

<label for="textInput" class="inputOutline">
          <input id="textInput" class="input responsive-column"
           placeholder="Type something" type="text"
           onkeydown="ConversationPanel.inputKeyDown(event, this)">

            <button class="Testbutton" onclick="ConversationPanel.inputKeyDown(event, document.getElementById('textInput'))">
              <i class="icon send"></i>
            </button>

 </label>

使用onkeydown事件在一个函数中插入click事件

2 个答案: