How To Retain Cursor Position When Updating A Knoc

问题:

The goal is to have user input converted to upper case as they type. I am using the following extender:

ko.extenders.uppercase = function (target, option) {
    target.subscribe(function (newValue) {
        target(newValue.toUpperCase());
    });
    return target;
};

This extender can be added to the observable that are bound to HTML text boxes:

self.userField = ko.observable(product.userField || "").extend({ uppercase: true });

This works great. Converts text bound to the observable to upper case. As the user types text into an empty field or adds it to the end of existing text, the text is converted to upper case.

So far, so good!

Now when the user wants to insert text, the cursor is placed to the insertion point either with the cursor keys or mouse and the new text is entered the character is inserted as upper case but the cursor position now jumps to the end of the text because the underlying observable is updated.

How can the cursor position be retained while still converting the user input to upper case?

Update 1:

I created a custom binding so I could access the element and get and set the cursor position. I tried to tap into the existing value binding goodness. I am using the built in ko.selectExtensions.writeValue function. This may be good enough for my application but may not work in all browsers.

ko.bindingHandlers.upperCase = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        ko.bindingHandlers["value"].init(element, valueAccessor, allBindings);
    },
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var caretPosition = getCaretPosition(element);
        var newValue = ko.utils.unwrapObservable(valueAccessor());
        ko.selectExtensions.writeValue(element, newValue.toUpperCase());

    setCaretPosition(element, caretPosition);

        // Code from: http://stackoverflow.com/questions/2897155/get-cursor-position-in-characters-within-a-text-input-field
        function getCaretPosition (ctrl) {
            var CaretPos = 0;

            // IE Support
            if (document.selection) {
                ctrl.focus ();
                var Sel = document.selection.createRange ();
                Sel.moveStart ('character', -ctrl.value.length);
                CaretPos = Sel.text.length;
            }
            // Firefox support
            else if (ctrl.selectionStart || ctrl.selectionStart == '0') {
                CaretPos = ctrl.selectionStart;
            }

            return (CaretPos);
        }

        function setCaretPosition(ctrl, pos) {
            if(ctrl.setSelectionRange) {
                ctrl.focus();
                ctrl.setSelectionRange(pos,pos);
            }
            else if (ctrl.createTextRange) {
                var range = ctrl.createTextRange();
                range.collapse(true);
                range.moveEnd('character', pos);
                range.moveStart('character', pos);
                range.select();
            }
        }
    }
};

回答1:

Well, i think the best solution is with Vanilla Javascript. Check the value is UpperCase if not, get position, change value, set position. Easy.

var stayUpperCase = function () {
  if(this.value != this.value.toUpperCase()){
    var caretPos = getCaretPosition(this);
    this.value = this.value.toUpperCase();
    setCaretPosition(this, caretPos);
  }
};
document.getElementById('myinput').addEventListener('keyup', stayUpperCase);
document.getElementById('myinput').addEventListener('change', stayUpperCase);

// Code from http://stackoverflow.com/questions/2897155/get-cursor-position-in-characters-within-a-text-input-field
function getCaretPosition (elem) {
  // Initialize
  var caretPos = 0;

  // IE Support
  if (document.selection) {
    // Set focus on the element
    elem.focus ();
    // To get cursor position, get empty selection range
    var sel = document.selection.createRange ();
    // Move selection start to 0 position
    sel.moveStart ('character', -elem.value.length);
    // The caret position is selection length
    caretPos = sel.text.length;
  }

  // Firefox support
  else if (elem.selectionStart || elem.selectionStart == '0'){
    caretPos = elem.selectionStart;
  }

  // Return results
  return (caretPos);
}

// Code from http://stackoverflow.com/questions/512528/set-cursor-position-in-html-textbox
function setCaretPosition(elem, caretPos) {
  if(elem != null) {
    if(elem.createTextRange) {
      var range = elem.createTextRange();
      range.move('character', caretPos);
      range.select();
    }
    else {
      if(elem.selectionStart) {
        elem.focus();
        elem.setSelectionRange(caretPos, caretPos);
      }
      else
        elem.focus();
    }
  }
}

<input type="text" id="myinput"/>

You can attach more keyboard events to make it looks smoother.

回答2:

After testing custom bindings and the jQuery based solution posted by Thanasis Grammatopoulos, I decided to go the CSS route and first created a new class:

.upper-case { text-transform: uppercase; }

I then applied it to the input elements I wanted to be displayed as upper case:

<input type="text" maxlength="16" class="upper-case" data-bind="value: fhaNum, valueUpdate: 'afterkeydown', disable: isReadOnly" />

Since this doesn't save the text as upper case in the observable, I upper cased the value before sending it to the server:

var data = {
    "fhaNum": self.fhaNum().toUpperCase()
};