2016-11-07 5 views
0

В настоящее время у меня возникают трудности с нажатием клавиши Enter, чтобы прекратить создавать новые строки в моем текстовом поле после достижения максимального количества строк. Количество строк передается в качестве параметра в компоненте, который я создал. Мое текстовое поле является редактором Redactor, а новые строки разделяются разрывами строк.Как ограничить количество строк в Textarea (Redactor)?

У меня есть вычислен наблюдаемый, который определяет количество строк на основе числа переносов в тексте и она возвращается правильное значение:

self.numberOfRows = ko.computed(function() { 
     return self.value().split(/<br>/).length; 
    }, this); 

В моих настройках Redactor У меня есть функция keydownCallback, сравнивающую количество строк до максимального числа строк и должны предотвратить клавишу ввод от создания новой строки, когда макс достигает или превышает:

keydownCallback: function (e) { 
      if (e.keyCode > 48 || e.keyCode === 32) { 
       if (self.remainingCharacters() <= 0) {      
        e.preventDefault(); 
       } 
      } else if (e.keyCode === 13) { 
       if (self.maxRows != null) { 
        if (self.numberOfRows() >= self.maxRows) { 
         e.preventDefault(); 
        } 
       } 
      } 
     }, 

Первая часть функции обратного вызова ограничивает количество символов и рабочий p но ключ ввода все еще создает новые строки. Я также попробовал «вернуть ложь»; вместо preventDefault, и я также попробовал stopPropagation перед preventDefault, но не повезло. Меня не интересуют пользователи, вставляющие значения в текстовое поле, и я не беспокоюсь о переносе слов. Предложения?

Разделенные функции обратного вызова:

 enterCallback: function(e) { 
      if (self.maxRows != null) { 
       if (self.numberOfRows() >= self.maxRows) { 
        return false; 
       } 
      } 
     }, 
     keydownCallback: function (e) { 
      if (e.keyCode > 48 || e.keyCode === 32) { 
       if (self.remainingCharacters() <= 0) { 
        e.preventDefault(); 
       } 
      } 
     }, 
+0

Отдельно на отдельные функции обратного вызова, с помощью ввода перезвонить и до сих пор входит в новую строку, когда максимальная строка достигнута или превышена. Оператор if в обратном вызове ввода выполняется правильно. Я смог отобразить сообщение в консоли, когда я нажал клавишу ввода и достиг максимального количества строк. –

ответ

0

UPDATE

Имел шанс поиграть с Redactor и заметил, что, когда я нажимаю возвращение, не <br> не вставлены, а вместо этого, новые <p> теги создаются. Пустой абзац будет содержать <p><br></p>. Таким образом, фактическое значение текстового поля что-то вроде:

<h2>Foo</h2> 
<p>Bar 
</p> 
<p>Buz 
</p> 

я соединял минимальное доказательство концепции, как это может быть обработано

$('#content').redactor({ 
    focus: true, 
    enterCallback: function(e) 
    { 
     var lines = this.code.get().split(/\r?\n/g).length; 
     console.log(this.code.get(), lines); 
     if (lines > 3) { // self.numberOfRows() 
      return false; 
     } 
    }, 
    keydownCallback: function(e) 
    { 
     // 
    } 
}); 

я не уверен, хотя, если расщепление новой линии больше надежный, чем расщепление, закрывая теги, такие как this.code.get().split(/<\/(p|h[1-6])>/).

Я бы обновить регулярное выражение внутри функции self.numberOfRows либо разделить на новые линии или закрывающим тегами


ОРИГИНАЛЬНЫЙ ОТВЕТ

Вы проверили docs? Там, кажется, 2 отдельные обратные вызовы для enter и keyup:

Вы можете вернуться ложным в этом обратном, чтобы предотвратить Redactor от обработки Enter/Return ключевые входы. Он позволяет разрабатывать пользовательские обработчики для этого события.

$('#redactor').redactor({ 
    callbacks: { 
     enter: function(e) 
     { 
      console.log(this.code.get()); 
      return false; 
     } 
    } 
}); 

Кроме того, если вы посмотрите на их Limiter plugin, он просто возвращает ложь:

if (count >= this.opts.limiter) 
{ 
    return false; 
} 
+0

Спасибо. Я пробовал это и по-прежнему, похоже, поступил так же, как и мой исходный код, который я опубликовал. Я разместил измененные обратные вызовы, чтобы отразить ваш ответ. –

+0

У меня были строки, равные true, которые вставляют
всякий раз, когда пользователь нажимает кнопку ввода, а не использует теги абзацев. Я взял это и теперь раскалываю, закрывая теги. Он работает лучше. Единственная проблема, оставшаяся сейчас, заключается в том, что пользователь может вводить несколько пустых строк, прежде чем вводить текст, а затем вернуться и заполнить их после. Он перестает вводить новые строки при достижении максимума, но если они ввели больше, чем max, прежде чем они начнут печатать, они смогут обойти его. –