3

When clicking "enter" inside an editable div with Android chrome (Android 8.0.0 Chrome 61.0.3163.98) if the cursor is in-front of a word or in the middle of it, I cannot prevent the default behavior from happening. (When I catch the event with "onkeydown" it's already late - the change was made. Also, when you click enter in the middle of the word, the "onkeydown" is not firing)

Example: 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>
David Somekh
  • 795
  • 3
  • 12
  • 33
  • You should see [this](https://stackoverflow.com/questions/25043934/is-it-ok-to-ignore-keydown-events-with-keycode-229/25509350#25509350). – Serge K. Oct 17 '17 at 10:22
  • I just tested this on Android 8.1.0 (Pixel 2XL) with Chrome 64.0.3282.137 and it is working as intended. I know you're looking for a solution that can reproduce on the specified device, but it might help guide you to whether this is a version specific issue. – mootrichard Mar 02 '18 at 17:50
  • I am using exactly the same specifications as you are, just with the Pixel 2 normal size. I am still able to re-produce the problem. – David Somekh Mar 04 '18 at 07:06
  • Do you get the same error if you try evt.stopPropagation()? Could it be triggering another method somewhere else? – applecrusher Mar 04 '18 at 21:31
  • Have you tried: 1. using native JavaScript without jQuery? or 2. Using `evt. event.originalEvent` to gather the keyCode? – Randy Casburn Mar 05 '18 at 02:36

0 Answers0