javascript - How To Retain Cursor Position When Updating A Knockout js Observable In An Extender -
The goal is that the user input is converted into upper case as they type. I am using the following extender:
ko.extenders.uppercase = function (target, option) {target.subscribe (function (newview) {target (newValue.toUpperCase ()); }); Return target; }; This extension can be added to the sequences associated with the HTML text box:
self.userField = ko.observable (product.userField || "") .extend ({uppercase: true}); This works great text can be seen in the upper case. As the user writes text in an empty area or adds to the end of the existing text, the text is converted to upper case.
So far, great!
Now when the user wants to insert the text, the cursor is placed at the insertion point with either the cursor key or the mouse and the new text is entered, the letter is inserted as the upper case But the cursor's position now jumps at the end of the text because the built-in pattern is updated.
Update 1:
I have created a custom binding I can use the element and get the cursor position. I tried to tap into existing value binding wellbeing I am using the built in .selectExtensions.writeValue function. This can be great for my application but can not work in all browsers. ko.bindingHandlers.upperCase = {init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {ko. Binding handler ["value"] Init (element, value, user, sub binding); }, Update: function (element, value addition, allbindings, viewloadel, binding contaxes) {var caret.position = getCaretPosition (element); Var newValue = ko.utils.unwrapObservable (valueAccessor ()); Ko.selectExtensions.writeValue (element, newValue.toUpperCase ()); Set carat position (element, carerate position); // From Code: http://stackoverflow.com/questions/2897155/get-cursor-position-in-characters-within-a-text-input-field Function getCaretPosition (ctrl) {var Kerat Piece = 0; // IE support if (document.selection) {ctrl.focus (); Var Sel = document.selection.createRange (); Sel.moveStart ('character', -ctrl.value.length); CarePos = Sel.text.length; } // Firefox Support Otherwise (ctrl.selectionStart || ctrl.selectionStart == '0') {CaretPos = ctrl.selectionStart; } Return (karatepos); } Set the function (ctrl, pos) {if (ctrl.setSelectionRange) {ctrl.focus (); Ctrl.setSelectionRange (status, position); } And if (ctrl.createTextRange) {var range = ctrl.createTextRange (); range.collapse (true); Range.moveend ('character', position); Range.movest ('character', pause); range.select (); }}}}; Well, I think the best solution is with vanilla javascript if uppercase If not, check the value, get position, change value, set status
var stayUpperCase = function () {if (this.value! = This.value.toUpperCase ()) {var caretPos = getCaretPosition (this); This.value = this.value.toUpperCase (); Set carat position (this, carat pos); }}; Document.getElementById ('myinput'). AddEventListener ('keyboard', remain upstream); Document.getElementById ('myinput'). AddEventListener ('change', stay upstairs); // code http://stackoverflow.com/questions/2897155/get-cursor-position-in-characters-within-a-text-input-field function getCaretPosition (elem) {// startup var caretPos = 0; // IE support if (document.selection) {// focus focus on element elem.focus;); // Find the empty selection category to get the position of the cursor var sel = document.selection.createRange (); // Selection Selection Start with 0 sel.moveStart ('character', -elem.value.length); // Select the position of the caret length in the corpus = sel.text.length; } // Firefox support otherwise if (elem.selectionStart || elem.selectionStart == '0') {caretPos = elem.selectionStart; } // Return Return Results (Carat Po); } // http://stackoverflow.com/questions/512528/set-cursor-position-in-html-textbox Function Set from code.CaretPosition (elem, caretPos) {if (elem! = Null) {if (elem. CreateTextRange) {Var Category = elem.createTextRange (); Range.mov ('character', carat pos); range.select (); } And {if (elem.selectionStart) {elem.focus (); Elem.setSelectionRange (Carat Grinding, Carat Grinding); } Elem.focus (); }}} & lt; Input type = "text" id = "myinput" /> You can attach more keyboard events to make it look smooth.
Comments
Post a Comment