Question

我在Enter键上创建了两个功能按

隐藏显示潜水按Enter键按
自动调整textarea高度，当它到达结束时输入。

$('.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处理程序或从现有处理程序调用该函数：

e.g。

$('#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()

e.g。

$('#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）

1 个答案:

更新