Set focus to end of string in div

Question

I have a div with an attribute contenteditable and I want so cut the content that's input and is longer than e.g. 5 chars. But the focus is set to start of the input all the time...

var maxlength = 5;
$(".test").attr("contenteditable", function(){
    $(this).on('keyup', function( e ){
        if( $(this).html().length > (maxlength)){
            var content = $(this).html();
                content = content.substring(0,(maxlength));
            $(this).html(content).focus();
        }
    });
    return true;
});

div{
    width: 100px;
    height: 20px;
    background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test"></div>

How can I set the cursor to the end of the div content?

I found some samples here in SO but they all did not work for my construct.

I have tried .focus() and also with .blur() before and cleared content... no results...

Of course I don't want to install a Plugin...

Altering the content as part of the event like that is rather messy… why don't you use the `keypress` event, and cancel it if the length exceeds the maximum? See http://stackoverflow.com/questions/2278540/maxlength-in-textarea-using-jquery — cmbuckley, Apr 01 '15 at 12:02
@cmbuckley post this as an answere and ill accapt it! :D this brought me to the right thing :) — Dwza, Apr 01 '15 at 12:12
Glad it helped, but I'll suggest that it's marked as a duplicate rather than taking all of the credit :-) — cmbuckley, Apr 01 '15 at 20:46
Actually its not a duplicate. The other post is about textareas and they have a different behavior than divs does. Sometimes answere are similar but the mean diffrent things. So for me its not duplicate and you gave the correct answere with that hint. But thats very kind of you thinking like this! — Dwza, Apr 01 '15 at 22:12
No worries! To be honest I think it's better that the hint sent you in the right direction and you got to the answer yourself! — cmbuckley, Apr 01 '15 at 23:20

score 2 · Answer 1 · answered Apr 01 '15 at 13:09

My Solution:

$('.test').attr('contenteditable', function() {
  $(this).on('keypress', function(e) {
    var len = $(this).attr('maxlength');
    if ($(this).html().length >= len) {
      e.preventDefault();
    }
  });
  return true;
});

div {
  background: red;
}
.small {
  width: 42px;
}
.medium {
  width: 82px;
}
.large {
  width: 122px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
MaxLength 5:
<div class="test small" maxlength="5"></div>
MaxLength 10:
<div class="test medium" maxlength="10"></div>
MaxLength 15:
<div class="test large" maxlength="15"></div>

thx to @cmbuckley. Brought me to the new thinking :D

No focus needed because the focus is never lost and chars can be deleted easy.

score 0 · Answer 2 · edited May 23 '17 at 11:50

0

You should be able to moce the carret, here is a question about this :

Set keyboard caret position in html textbox

edited May 23 '17 at 11:50

Community

1
1

answered Apr 01 '15 at 12:02

DARK_DUCK

1,727
2
12
22

the thing is.. i am testing this in jsfiddle and allways get errors when using createtextrange stuff... – Dwza Apr 01 '15 at 12:05
I think this is because you are using a
instead of a or . The best solution would be using a <input type="text"/> with a maximum length allows. I would'nt even require javascript
– DARK_DUCK Apr 01 '15 at 12:07
Using an input is not the task :) I know how to do it with the input but in my case I have to use div. But the comment of @cmbuckley brought me to the right solution. Thx anyways :) – Dwza Apr 01 '15 at 12:14
I think his answer is the correctone too if you cannot user inputs :) – DARK_DUCK Apr 01 '15 at 12:21

Set focus to end of string in div

2 Answers2