We have a form that lets people input html formatted text and that input is then displayed elsewhere on the webpage.
Due to layout constraints the input may not be longer than X lines. There is no preview of the edited text in the webpage. Input upon submit is immediately published. (Short Explanation why I cannot fix the layout: the text in question is displayed as an overlay above an image. The overlay has about the size of the image and that is fixed. The text should be completely visible inside that overlay and should not spill over.)
I am being asked to implement something to keep people from entering too much text.
My first try was going for “maxLength” but goes wrong because of the possibility html formatting of the input.
Besides the obvious two 1. expecting users to be smart and/or 2. implementing a preview method, how else could we possibly solve this?
I am out of ideas, I’ll also accept an explanation why it is impossible
Technology used: java, wicket 1.4.x
I’m not a web-development expert so this may not be a precise enough answer.
Using javascript you can get the effective size of an HTML element once it has been rendered in the browser. Thus, one solution could be to render the page server-side, and check whether the result exceeds the size you expect.
This may not guarantee a correct result however because the server may render the page differently than the client. You could also always accept the input, then when the client renders the page, have a snippet of javascript that checks (client-side this time) whether the rendered result is okay. If it isn’t, then let javascript redirect the client to an error page so that it can edit his input.
What I’d do however is to change the layout so that nothing breaks if the user enters too much text. Using the CSS overflow property could be a start. You could also implement better solutions in javascript such as dynamically changing the text size until it fits the size you want.