Keypress 上的两个功能将不起作用（textarea）

Question

我创建了两个按回车键的函数

隐藏显示 dive 按 Enter 键
在输入结束时自动调整文本区域的高度。

这里是fiddle：http://jsfiddle.net/rz3f3gng/2/

$('.one').hide();

$(function() {
  //hide show dive on enter press and on other keys hide div
  $('#mainContent').on('keypress', function(e) {
    if (e.which == 13) {
      e.preventDefault();
      $('.one').show();
    } else {
      $('.one').hide();
    }
  });

  function TextareaAuto(o) {
    o.style.height = "200px";
    o.style.height = (2 + o.scrollHeight) + "px";
  }
});

.one {
  width: 100px;
  height: 30px;
  background: red;
}
textarea {
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="one">
</div>

<textarea id="mainContent" onkeydown="TextareaAuto(this)" style="overflow:hidden">

</textarea>

有时只有一个功能可用，隐藏显示 div 或自动调整大小 textarea。

Answer 1

切勿将内联事件处理程序与 jQuery 处理程序混合使用。只需使用两个 jQuery 处理程序或从现有处理程序调用函数：

例如

$('#mainContent').on('keypress', function(e){
    if (e.which == 13) {
        e.preventDefault();
        $('.one').show();
    }
    else{
        $('.one').hide();
    }
    TextareaAuto(this);
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/rz3f3gng/3/

更新

因为您仍然希望 Enter 起作用（请参阅下面的评论），只需删除您的 e.preventDefault()

例如

$('#mainContent').on('keypress', function(e){
    if (e.which == 13) {
        $('.one').show();
    }
    else{
        $('.one').hide();
    }
    TextareaAuto(this);
});

http://jsfiddle.net/TrueBlueAussie/rz3f3gng/4/

这意味着现在可以使用 toggle() 将其减少到

$('#mainContent').on('keypress', function(e){
    $('.one').toggle(e.which == 13);
    TextareaAuto(this);
});

http://jsfiddle.net/TrueBlueAussie/rz3f3gng/5/

Keypress 上的两个功能将不起作用（textarea）

Two functions on Keypress won't work (textarea)

javascript

jquery

textarea

function

更新