Question

我有一个contenteditable div，我控制一些键的行为。特别是，我有这个：

$('#my_contenteditable').on('keydown', function(e) {
  // Some code...
  if (e.key == 'Enter') {
    $(this).blur();
    e.preventDefault();
    return;
  }
  // Some more code...
});

但是在我对元素进行模糊处理后，当我再次按Enter键时，Chrome想要重新聚焦它。

JSFiddle demo here

我可以阻止此行为吗？

Answer 1

<?php

 $event[0]['from']='1943-00-00';
 $event[0]['to']='1943-04-00';

 $event[1]['from']='1943-05-00';
 $event[1]['to']='1943-05-14';

 $event[2]['from']='1943-06-00';
 $event[2]['to']='1943-06-20';

 $event[3]['from']='1943-06-00';
 $event[3]['to']='1943-06-00';

 $event[4]['from']='1943-04-00';
 $event[4]['to']='1943-05-13';

 $event[5]['from']='1943-05-14';
 $event[5]['to']='1943-00-00';

 print_r($event);

 $dates=array();
 foreach($event as $key => $value)
 {
   $from['date']=$value['from'];
   $from['type']=1;
   $from['id']=$key;
   array_push($dates,$from);
   $to['date']=$value['to'];
   $to['type']=2;
   $to['id']=$key;
   array_push($dates,$to);
 }

 function compare_dates($a, $b)
 {
   // sort by date
   $retval = strcmp($a['date'], $b['date']);
   // if date are equal sort my id 
   if(!$retval) $retval = $a['id'] - $b['id'];
   //if also id is equal sort by type
   if(!$retval) $retval = $a['type'] - $b['type'];
   return $retval;
 }


 //first sort by date
 usort($dates,'compare_dates');
 /*
  * unspezific dates shoud be more at the beginning than specific dates 
  * So go from back to begin 
  */
  function searchEvent($array,$id)
  {
    $result=false;
    foreach( $array as $key => $value)
    {
      if($value['id'] == $id)
      {
         $result=$key;
         break;
      }
    }
    return $result;
  }

  print_r($dates);

  $newEvent=array();
 //go over dates and rebuild events
 while(count($dates) > 0 )
 {
   //on the beginn of array we hve the most unspezific events, so we start on the end
   $lastdate=array_pop($dates);
   $id=$lastdate['id'];
   $type=$lastdate['type'];
   if($type == 1)
   {
    $from=$lastdate['date'];
   }
   else
   {
    $to=$lastdate['date'];
   }
   $otherDateKey=searchEvent($dates, $id);

   $otherDate=$dates[$otherDateKey];
   array_splice($dates, $otherDateKey,1);

   $type=$otherDate['type'];
   if($type == 1)
   {
      $from=$otherDate['date'];
   }
   else
   {
     $to=$otherDate['date'];
   }
   $data['from']=$from;
   $data['to']=$to;
   array_unshift($newEvent, $data);
}

print_r($newEvent);

Answer 2

<script>
$('#my_contenteditable').on('keydown', function(e) {
    if (e.key == 'Enter') {
    $(this).attr("contenteditable","false");

  }
});
</script>

Answer 3

感谢Prakhar Mathur的回答：

$('#my_contenteditable').on('click', function() {
  $(this).attr('contenteditable', 'true');
});
$('#my_contenteditable').on('keydown', function(e) {
  if (e.key == 'Enter') {
    $(this).attr('contenteditable', 'false');
    e.preventDefault();
    return;
  }
});

在Chrome上阻止Enter keypress上的自动对焦

3 个答案: