Put the text into another hidden div on the page, don't constrain its width, then check the width as they type. Remember that divs are naturally block-level so you'd have to inline/inline-block it, or use a span.

Put the text into another hidden div on the page, don't constrain its width, then check the width as they type. Remember that divs are naturally block-level so you'd have to inline/inline-block it, or use a span.

Interesting. I'll try this. I also need to check for text that's pasted, not just typed.

Thank you!

EDIT: This works great! What would you suggest for managing pasted text that's too long? Do I really need to write a function that deletes words until my max width is met?

Last edited by Frank Grimes; August 31st, 2016 at 04:15 PM.

“Be ashamed to die until you have won some victory for humanity.” -- Horace Mann

For pasting, fire your Javascript on the keyup event - rather than keypress, which is what I'd guess you're using now.

For the user experience I would suggest not altering the text automatically but showing an error to the user that the text is too long. Then they are free to edit as they see fit until they meet the requirements. If you really want to take automatic action then yes, you basically have to keep removing words until it fits. You could try to be clever with a bit of math, like if the text is 125% of the width then you try cutting at 4/5th of the text, but it's not worth the added complexity.

Removing words is as simple as a loop using

Code:

newvalue = oldvalue.replace(/\W+\w*$/, ""); // regex to remove the last word and stuff before it

You should also do a sanity check that newvalue != oldvalue each time.

If you're wondering about \w* instead of \w+, that's so text like "abc def " will replace to "abc def" then to "abc"; otherwise \W+\w+ would not match the first one and you'd trigger the sanity check.

There's also the case of someone typing a single really long word, which would be removed entirely. In that case (newvalue == "", oldvalue != "") then you might want to start cutting letters instead of whole words - or decide that it's unlikely to be an issue and not do anything special.

@requinix -- Thanks again! I am using keyup, not keypress. After sleeping on this, I think what will work is displaying a warning to users that the text is too long and allow them to change it, just as you suggest. When they press SAVE, I'll do another check. If it's too long, I'll start truncating words until it isn't. I think after a couple times using this, they'll understand. I hope anyway, since they've ignored all my previous training and documentation.

@Coothead -- Thank you! Unfortunately, I can't use a letter count since this isn't displayed with a monospaced font. M's are wider than I's, for example. The only way this will work for me is actual pixel width, which complicates everything.

Thank you both!

Last edited by Frank Grimes; September 1st, 2016 at 09:36 AM.

“Be ashamed to die until you have won some victory for humanity.” -- Horace Mann