Android(V.8.0.0 Chrome 61.0.3163.98)/ Jquery - 在可编辑div上单击enter时防止出现默认行为

时间:2017-10-17 10:04:25

标签: javascript jquery html css android-chrome

如果光标位于单词的前面或中间位置,当使用Android Chrome(Android 8.0.0 Chrome 61.0.3163.98)在可编辑div中单击“输入”时,我无法阻止默认行为发生。 (当我用“onkeydown”捕获事件时,它已经很晚了 - 进行了更改。另外,当你在单词的中间单击enter时,“onkeydown”没有触发)

示例:http://solid-php.cloudapp.net/DV/enter.html

$(".bug").on('keydown',function(evt) {
if(evt.keyCode == 13)
{
	evt.preventDefault();
	$(".html").text($(".bug").html());
}
	

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" />
<div style="font-family:calibri" class="example">
  <div contenteditable="true" style="margin-bottom:16px;font-size:30px; text-align:center" class="bug">On Android NEXUS 5X <b><i>(Android 8.0.0 Chrome 61.0.3163.98)</b></i> if you click enter on this editable div in the middle of a word or beginning of word, you cannot prevent the default behavior.</div>

  <div style="background-color:coral; border:2px solid coral" class="container">
    <div style="margin-bottom:6px"><b>Edit the div above and click enter to see the change in the DIV html (After onkeydown was trigerred - the change was already made!)</b></div>
    </b>
  </div>
  <div style="margin-bottom:16px;background-color:coral" class="html"></div>

  <div style="background-color:skyblue">

    <b><i>Jquery code:</b></i>

    <p>$(".bug").on('keydown',function(evt) {
      <br>if(evt.keyCode == 13)
      <br>evt.preventDefault();
      <br>});

  </div>


</div>

0 个答案:

没有答案