在输入区域文本中动态添加输入答案

【问题标题】：Adding enter in inputarea text dynamically在输入区域文本中动态添加输入
【发布时间】：2020-01-09 07:57:01
【问题描述】：

我有一个脚本，我想在按下 shift+enter 时添加 Return，它与单个 Enter 一起工作正常，但由于 javascript 的错误未选择确切的内容，它没有使用 \n 添加 shift+Enter .我收到以下错误

Uncaught TypeError: Cannot read property 'substring' of undefined
    at HTMLFormElement.<anonymous> (86:206)
    at HTMLFormElement.dispatch (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:5227)
    at HTMLFormElement.elemData.handle (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:4879)

这是我的代码

$(document).ready(function(){
  $('.new_message').keyup(function (event) {
  if (event.keyCode === 13 && !event.shiftKey) {
    event.preventDefault();
      var values = $(this).serializeArray();
      App.conversation.speak(values);
      $(this).trigger('reset');
  } else {
    if(event.keyCode === 13 && event.shiftKey){
      var content = $(this).serializeArray();
      var caret = getCaret($(this));
      this.value = content.substring(0, caret - 1) + "\n" + content.substring(caret, content.length);
    }
  }
  });
});

我只想在用户按 shift+enter 时添加回车，如果他按正常回车，它工作正常并发送短信。我正在使用带有套接字的 Rails 向用户发送聊天消息。

【问题讨论】：

content.substring 是content 第一次出现在您共享的代码中。为什么不应该是undefined？
抱歉内容 = 值，我正在使用代码来解决问题。实际上 content = $(this).serializeArray() ，我也尝试过 content = this 但它不起作用。
现在content 是serializeArray() 的返回值。所以它是一个数组。那么它为什么要有substring 方法呢？它不是一个字符串。

标签： javascript jquery actioncable

【解决方案1】：

  var content = $(this).serializeArray();
  var caret = getCaret($(this));
  this.value = content.substring(0, caret - 1) + "\n" + content.substring(caret, content.length);

要获取触发事件的文本区域的值，请使用this.value（就像你在我引用的第三行中所做的那样）。

serializeArray() 用于创建一个包含表单中所有数据的数组。它不会返回字符串，所以你的返回值不会有substring 方法。

【讨论】：

@KamalPanhwar — 这似乎不太可能，但无法测试，因为您没有提供 minimal reproducible example

【解决方案2】：

问题是我正在使用 .new_message 表单选择器，虽然它正在获取价值，但它现在允许我对方法进行子串化。现在我通过向 message_box 添加另一个 id 并将代码更改为以下方式进行了更改。

$(document).ready(function(){
  $('.new_message').on('keyup', function(event) {
  if (event.keyCode === 13 && !event.shiftKey) {
    event.preventDefault();
      var values = $(this).serializeArray();
      App.conversation.speak(values);
      $(this).trigger('reset');
  } else {
    if(event.keyCode === 13 && event.shiftKey){
      var content = $('#message_box').val()
      var caret = getCaret(this);
      $('#message_box').val( content.substring(0, caret - 1) + "\n" + content.substring(caret, content.length) );
    }
  }
  });
});

它起作用了，但我注意到它正在添加两个 Returns 并且它是在开始时，所以现在我删除了第二个条件并且它运行良好。感谢您的支持。

【讨论】：

【解决方案3】：

Uncaught TypeError: Cannot read property 'substring' of undefined

这个错误意味着你在一个不存在的变量上调用一个函数substring。在您的情况下，它是 else 语句中的变量 content 。确保该变量存在并且可以在该函数的范围内访问。

[编辑]

现在您已经更新了代码并将变量 values 更改为 content 我拒绝相信您会遇到同样的错误。请检查您的代码并更新问题以反映应用程序的实际状态。

【讨论】：