Блог

в настоящее время я работаю над страницей, на которой есть головоломка с перекрестными словами. Следовательно, я нахожусь в ситуации, когда нужно прекратить вводить более одного символа в редактируемом содержимом div. Пожалуйста, обратите внимание, что это для разработки в формате epub. Следовательно, я не могу использовать входной тег. Пожалуйста, помогите мне в этом отношении.

Я попробовал следующий скрипт в самом div. Но это не позволяет мне вводить какой-либо символ после того, как я использовал пробел.

 onkeypress="return (this.innerText.length >= 1 ? false : true )"
  

Поскольку я должен клиенту в другой день. Было бы здорово, если бы вы решили эту проблему.

Заранее спасибо…

Чтобы разрешить другие управляющие клавиши, вы должны onkeydown вместо этого обработать событие, но обратите внимание, что во время onkeydown срабатывания введенный ключ не был добавлен в текстовое поле. Поэтому вместо проверки длины текста равной 1, мы проверим, равна ли она 0.

 $('div').keydown(function(e){
   return $.inArray(e.which, [8, 46, 37, 39]) > -1 || $(this).text().length == 0;
});
  

8 является ключевым кодом для Backspace, 46 является ключевым кодом для Delete 37 и 39 являются ключевыми кодами для Left arrowи Right arrowсоответственно.

ДЕМОНСТРАЦИЯ.

Дополнительное примечание об использовании return false; для отмены события, обычно мы должны использовать e.preventDefault() , потому return false; что вызывается также средство e.stopPropagation() .

Демонстрационная скрипка

Используйте обратный вызов для нажатия клавиши. (Работает для обратного пробела, удаления)

 $('div').on('keypress',function(){
     return ($(this).text().length<1)
});
  

Также вам может потребоваться обработать копирование-вставку

 $('div').on('paste',function(e){
    e.preventDefault();
});
  

Демонстрация с обработкой вставки