What's wrong: Unable insert the em or any tag once while on keyup via innerHtml in jQuery

Question

I have one big issue, I want to add em tag after a while, this occurs on keyup event in jQuery. So I want to add em tag, and append the rest of the text or chars inside it. This is my code:

$(this).text.innerHtml("<em></em>").append($(this).text);

@Spokey, I just added the rest of the code, it is in keyup, and I want the em to be inserted only ONCE, and next append the rest of the chars that exceed the maxLen, thanks a lot! — John Smith, Jun 07 '13 at 11:19
@Spokey, I checked your jsfiddle that's not what I want to do. I will add more details to my post, wait. — John Smith, Jun 07 '13 at 11:37
@Spokey I suggest using `next('em')` instead of classes, and create one it it returns no elements. — Broxzier, Jun 07 '13 at 11:44
@ChristopherW, .btn is just a CSS class, it will disable/enable button based on the current counter. — John Smith, Jun 07 '13 at 11:45
@Broxzier that may also work but it's not a must. [updated fiddle](http://jsfiddle.net/Spokey/8Lkr4/4/) — Spokey, Jun 07 '13 at 11:47
Yup, but it's best practice not to use classes for every small thing. jQuery next: http://api.jquery.com/next/ — Broxzier, Jun 07 '13 at 11:49
@Spokey, your jsfiddle the latest, just wraps the entire content inside em, this is what I already know how to achieve, but how to wrap or innerhtml after a certain length seems impossible right now, it worked just 10 minutes ago, now it doesn't :( — John Smith, Jun 07 '13 at 11:56
@Broxzier, what's wrong with my code? Is innerHtml() not supported? Weird, it worked just some 10 minutes ago. — John Smith, Jun 07 '13 at 12:02
Oooh, now I get what you want. You want a countdown saying how many characters people have left to use! It wasn't clear to me. innerHTML is not a jQuery property, but one of the DOM element. If you use `this.innerHTML` it should work, but you're converting it to a jQuery object with `$(this)`. — Broxzier, Jun 07 '13 at 12:18
@Broxzier, I already have that. What I want is to somehow append the characters that exceed the limit, when the counter reports -1, -2 and so one, these characters should somehow append between two and these tags should be kept inside the div[contenteditable]. — John Smith, Jun 07 '13 at 12:25
@Spokey, your latest jsfiddle looks promising, but I cannot get it work with the above code, can you somehow make it work with the above code? Thanks a lot! — John Smith, Jun 07 '13 at 12:31
For example, it's not smooth, the test does not flow with the background, as it would with your last example in your last jsfiddle, in addition, it's not easy to maintain stable control, because if users are going to use it, they might want better control on: Ctrl+A+Del etc. But your last example looks somewhat promising, if you can get it to work with my jsfiddle sample, I'd be happy to see that and mark your post as answer, but only if it works the way I want it. Thanks a lot! Sad that other StackOverFlow folks are not replying here to help:(. — John Smith, Jun 07 '13 at 12:56
@Spokey I just retried my own previous solution, and backspace does not work pefectly either, which is another problem to address, currently I am waiting for somebody that knows how to get around these issues and provide a smooth experience. Thanks a lot! — John Smith, Jun 07 '13 at 13:36

score 0 · Accepted Answer · edited May 23 '17 at 12:06

This code will make the overflowing characters red. I use text() because this ignores the em tag within the div.

$(function () {
    $('div').keyup(function () {
        var $this = $(this),
            text = $this.text(),
            maxlength = 20;

        if (text.length > maxlength) {
            var first = text.substring(0, maxlength),
                overflow = text.substring(maxlength, text.length);

            // this.innerHTML = first + '<em>' + overflow + '</em>';
            $this.text(first);

            // Now all there's left to do is force the caret at the end,
            // but that's pretty much code and would make this messy.
            // I'm sure you can google this. There's a link in my answer.
        }
    });
});

With this HTML

<div contenteditable="true" spellcheck="true" role="textbox" aria-multiline="true" id="342387257900146688">
    Type here.
</div>

Here's a live fiddle: http://jsfiddle.net/BaN7D/1/

However, if it exceeds the max length, .html() will force the cursor at the beginning. There are samples out there to place a cursor at the end of the div. Here's someone on SO that asked a question about it with a good answer: Set cursor position on contentEditable <div>

See this, jsfiddle.net/FP4nu/5 – John Smith Jun 07 '13 at 12:58 — John Smith, Jun 07 '13 at 12:58

score 0 · Answer 2 · answered Jun 07 '13 at 14:19

0

Try to use .html() instead off innerHTML and then append.

answered Jun 07 '13 at 14:19

Giovanni Di Toro

797
1
14
34

that only wraps it, unfortunately! – John Smith Jun 07 '13 at 14:21

What's wrong: Unable insert the em or any tag once while on keyup via innerHtml in jQuery

2 Answers2