在使用输入法时，输入框和文本框会与JS Enter回车提交功能冲突。这个问题可能会导致用户输入过程中意外提交表单或无法完成输入操作，给用户带来不好的体验。造成这个问题的原因是，输入法在输入过程中会触发一系列事件，如 keydown、keypress 和 input 等事件。而在某些情况下，这些事件的触发顺序会与JS Enter回车提交功能相冲突，导致表单的意外提交或输入操作失效。我们怎么来解决呢？

解决方案：

使用 submit 事件替代 keydown 事件

通常会监听 keydown 事件，判断是否按下了回车键，并执行对应的操作。但是，在使用输入法输入的情况下，这种做法可能会导致表单的意外提交。然而可以使用 submit 事件来替代 keydown 事件，以确保表单只有在用户意识到提交时才能进行提交操作。

<form id="form">
  <input type="text" id="input">
</form>

var form = document.getElementById('form');
var input = document.getElementById('input');

form.addEventListener('submit', function(e) {
  e.preventDefault();
  // 处理表单提交逻辑
});

input.addEventListener('keydown', function(e) {
  if (e.keyCode === 13 && !e.shiftKey) {
    e.preventDefault();
    form.dispatchEvent(new Event('submit'));
  }
});

例子中，监听了表单的 submit 事件，并通过 preventDefault() 方法防止默认的表单提交行为。在输入框内部，监听了 keydown 事件，并判断是否按下了回车键。如果按下了回车键且没有按下 shift 键，则使用 preventDefault() 方法防止表单的默认提交行为，并手动触发表单的 submit 事件。

延迟提交

另一种解决方案是延迟表单的提交操作，以等待输入法的输入完成。具体来说，我们可以在用户按下回车键后等待一个短暂的时间，如果用户继续输入，则取消表单提交操作，否则执行表单提交操作。

<form id="form">
  <input type="text" id="input">
</form>

var form = document.getElementById('form');
var input = document.getElementById('input');
var timeout;

input.addEventListener('keydown', function(e) {
  if (e.keyCode === 13 && !e.shiftKey) {
    e.preventDefault();
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      form.submit();
    }, 500); // 等待500ms之后提交
  }
});

例子中，使用了 setTimeout() 方法来延迟表单的提交操作。具体来说，当用户按下回车键时，我们清除之前已经存在的 timeout，然后创建一个新的 timeout，在一定时间后执行提交操作。如果用户在这段时间内继续输入，则会清除之前创建的 timeout，防止意外的表单提交。

禁用 input 事件

还有一个解决方案是禁用 input 事件，以确保输入法的输入不会影响到回车提交逻辑。我们可以监听 keydown 事件，并在按下回车键时禁用 input 事件，在执行完回车提交逻辑后再重新启用 input 事件。

<form id="form">
  <input type="text" id="input">
</form>

var form = document.getElementById('form');
var input = document.getElementById('input');

var disabledInputEvent = false;

input.addEventListener('keydown', function(e) {
  if (e.keyCode === 13 && !e.shiftKey) {
    e.preventDefault();
    disabledInputEvent = true;
    // 处理表单提交逻辑
    form.submit();
    setTimeout(function() {
      disabledInputEvent = false;
    }, 0);
  }
});

input.addEventListener('input', function(e) {
  if (disabledInputEvent) {
    e.preventDefault();
  }
});

在例子中，我们添加了一个变量 disabledInputEvent，用来表示当前是否需要禁用 input 事件。在按下回车键后，我们将该变量设置为 true，并执行表单提交逻辑。在这个过程中，我们在 setTimeout() 方法中将该变量重新置为 false，以确保表单提交逻辑之后可以正常处理 input 事件。

同时，在 input 事件监听函数中，我们判断当前是否需要禁用该事件，如果是，则使用 preventDefault() 方法防止其默认行为。