search

bmcmahen / react-wysiwyg

retain some control over contenteditable input
169 stars 37 forks source link

[question] proper way to limit text length #24

Closed ksavenkov closed 9 years ago

ksavenkov commented 9 years ago

I want to limit text length, so that when a user tries to input more text than allowed, nothing happens.

How would you suggest to do that? I see that trimming props.html doesn't work, as the div with content.editable has it's internal state. When user continues to type in, even if nothing happens in the onChange function (= props.html isn't updated), the contents are updated. Probably it's possible to solve by getting actual contents via ref and trimming them directly in ref, but that's really weird.

bmcmahen commented 9 years ago

I haven't tried this myself, but you could probably use either the onKeyPress or onKeyDown callback, which supplies the original event as an argument. You could check the length of the input content there, and do the usual e.preventDefault to prevent the user from further input.

ksavenkov commented 9 years ago

Great, thanks, that works like a charm!