knockout.js - saber - ¿Cómo construir un área de texto con contador de caracteres y longitud máxima?

cómo contar el número de caracteres en word 2010

Question

Por favor considere este jsfiddle . Contiene algo en esta línea:

<textarea data-bind="value: comment, valueUpdate: ''afterkyedown''"></textarea>

<br/><br/>
<span data-bind="text: getCount, valueUpdate: [''afterkeydown'',''propertychange'',''input'']"></span> characters???

Y este JavaScript:

var viewModel = function(){
    var self = this;

    self.count = ko.observable(0);
    self.comment = ko.observable("");
    self.getCount = function(){
        var countNum = 10 - self.comment().length;
        self.count(countNum);
    };
}

var viewModel12 = new viewModel();
ko.applyBindings(viewModel);

Tengo un área de texto donde la longitud máxima debe ser de 20 caracteres. Cuando la cantidad de caracteres llegue a 20, se detendrá, y si intenta agregar más caracteres, se eliminarán.

Tenga en cuenta que esto también tiene que funcionar para copiar / pegar: si un usuario pega más de 20 caracteres, solo los primeros 20 permanecerán, y el resto de ellos debería eliminarse.

Answer 1

El uso de un valor calculado solo resuelve parcialmente el problema. Desactivar el área de texto basado en ese valor calculado (como se hizo en el violín de Michael Berkompas ) realmente no resuelve el problema. Debe usar un enlace personalizado para que esto funcione. Usando ese violín como punto de partida, podemos usar enlaces personalizados para completarlo:

http://jsfiddle.net/ReQrz/1/

Que es algo así como:

ko.bindingHandlers.limitCharacters = {
    update: function(element, valueAccessor, allBindingsAccessor, viewModel)
    {
       element.value = element.value.substr(0, valueAccessor());
       allBindingsAccessor().value(element.value.substr(0, valueAccessor()));
    }
};

Y luego haciendo:

<textarea data-bind="value: comment, valueUpdate: ''afterkeydown'', limitCharacters: 20"></textarea>

Answer 2

¿Por qué no en la vista hacer algo como esto?

<textarea data-bind="event: { keypress: enforceMaxlength }></textarea>

¿Con esto en viewModel?

function enforceMaxlength(data, event) {
        if (event.target.value.length >= maxlength) {
            return false;
        }
        return true;
    }

Answer 3

Esto funciona para mí en 3.0.0

ko.bindingHandlers.maxLength = { update: function(element, valueAccessor, allBindings){ if(allBindings().value()){ allBindings() .value(allBindings().value().substr(0, valueAccessor())); } } }

<textarea data-bind="value: message, maxLength: 255, valueUpdate: ''afterkeydown''"></textarea>

Answer 4

Echa un vistazo a este jsfiddle , que funciona en esta línea:

var viewModel = function(){
    var self = this;

    self.comment = ko.observable("");
    self.count = ko.computed(function(){
        var countNum = 10 - self.comment().length;
        return countNum
    });
}

var vm = new viewModel();
ko.applyBindings(vm);

<textarea data-bind="value: comment, valueUpdate: ''afterkeydown''"></textarea>
<br/><br/>
<span data-bind="text: count"></span> characters​​​​​​​

Necesitas aprender sobre ko.computed () para hacer este tipo de cosas ...