Text cursor is moving to left after every character

Question

This is a bug related to the code I have made.

I was making a Text Length validation field, came up with some kind of working code. However something that I am doing here is causing the Text cursor to move to the left every time you type, meaning that your typed text comes out backwards or in a mess.

What is happening below that could be causing this? I'd imagine probably the splice?

JSFiddle and jQuery below

$(function(){

    var charLimit = 10;

    $('.input').keypress(function(e){
        if (e.which > 0){
            var string = $(this).text().split("");
            for(i=0;i<charLimit;i++){
                if(string[i] !== undefined){
                    string.splice((charLimit-1),0,"<span class='error'>");
                    string.push("</span>");
                }
            }
            $(this).html(string.join(""));
        }
    });

});

Personally I prefer the look of this compared to the attribute 'maxlength' :) However it does not check that previously invalid characters are now valid. (Try deleting characters) — jaunt, Jul 03 '15 at 12:57
ah yes you're right @jaunt, that's because I used `e.which > 0` which means it will only run the function on "printable" characters... hm, another thing to fix! — Josh Stevenson, Jul 03 '15 at 12:58
I suspect that `$.html` is reinitializing the caret position every time it is used. — Gaurang Tandon, Jul 03 '15 at 12:59
By the way, if you examine the `innerHTML` of `span.error`, you'll see it is nesting every time. Try fixing that. — Gaurang Tandon, Jul 03 '15 at 13:02
@GaurangTandon OH yeah... I never told it to delete it self when it gets back under the char limit did I... Thanks! I have a feeling I am going to have to start again with this function — Josh Stevenson, Jul 03 '15 at 13:03
Note that you can shorten this code using a Regex, however it still suffer from the odd caret placement problem: http://jsfiddle.net/1xqbLns5/7/ — Rory McCrossan, Jul 03 '15 at 13:06
@RoryMcCrossan Nice, but you need to refine your regex to avoid nesting ``. :) — Chop, Jul 03 '15 at 13:20
@JoshStevenson Maybe [this question](http://stackoverflow.com/q/8219639/1734119) is related and could help? — Chop, Jul 03 '15 at 13:22
@JoshStevenson I guess you want something like this (http://jsfiddle.net/nh9hbxdf/ ) I have used @RoryMcCrossan 's `regex` in it — PHP Worm..., Jul 03 '15 at 13:27
@PHPWorm... YEEESSSSSS. You found a fix!!!! Post it as an answer man! — Josh Stevenson, Jul 03 '15 at 13:28

PHP Worm... · Accepted Answer · 2015-07-03T13:33:36.127

3

Use this function to always place cursor at end :

function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
            && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}

Use it after

 $(this).html(string.join(""));

like this:

 placeCaretAtEnd( document.getElementById(".input") );

You might be looking for this: http://jsfiddle.net/nh9hbxdf/

This can be achieved by using some css tricks:

here is the updated code:

 <p id="output"></p>
 <textarea></textarea>
<style>
  textarea, #output {
                width: 500px;
                height: 10em;
                padding: 0.2em;
                margin: 0.2em;
                box-sizing: border-box;
                font: 13px arial;
                border: 1px solid silver;
                white-space: pre-wrap;
            }

            textarea {
                position: relative;
                -webkit-text-fill-color: transparent;
                overflow: auto;
            }

            #output {
                position: absolute;
                pointer-events: none;
                z-index: 1;
            }

            #output span:first-of-type {
                color: red;
                /*background-color: blue;*/
            }
.error{
    color:red;
}

<script>

 $(document).ready(function(){
                $('textarea').on('input', function() {
                    $('#output').html(this.value.replace(/^(.{10})(.*)$/, '$1<span class="error" contenteditable>$2</span>'));
                });

                $('textarea').focus();
            });     

</script>

edited Jul 03 '15 at 13:33

answered Jul 03 '15 at 12:59

PHP Worm...

4,109
1
25
48

Thanks dude. That's a massive script though, it's bigger than my whole code! Is this the only way to achieve it? :( I don't want to mess up my little function – Josh Stevenson Jul 03 '15 at 13:01
Yeah, well a `p` to be precise. check out the fiddle: http://jsfiddle.net/Panomosh/1xqbLns5/ – Josh Stevenson Jul 03 '15 at 13:03
1

Oh also just noticed. This isn't jQuery is it lol. It's just JavaScript. I bet we can make that loads shorter. – Josh Stevenson Jul 03 '15 at 13:07
@JoshStevenson not really - jQuery doesn't do much with textRanges as it's primarily a DOM manipulation tool. – Rory McCrossan Jul 03 '15 at 13:08
1

`placeCaretAtEnd(e.target);` would be better. – Roamer-1888 Jul 03 '15 at 13:09
1

after looking to your code @JoshStevenson I guess It will not work for you because this function will always place the cursor at the end `What about the situation if you want to edit text by clicking in middle of already written text in your p tag ` – PHP Worm... Jul 03 '15 at 13:16
modify this function for better functionality – PHP Worm... Jul 03 '15 at 13:18
1

You mind explaining that JSFiddle to us? and get rid of that first bit. Your answer is miles better than moving the cursor to the end – Josh Stevenson Jul 03 '15 at 13:33
Thanks @JoshStevenson I have just placed a `textarea` over `p` tag and all the text is written in `textarea`. – PHP Worm... Jul 03 '15 at 13:36
I have done this because if we do the same thing with `textarea ` as we are doing with `p` tag cursor always remain on its original position. I don't know why this is the case with `p` or `div`. – PHP Worm... Jul 03 '15 at 13:38

Text cursor is moving to left after every character

1 Answers1