joetcochran
New Member
I'm trying to create an editable area on my website that has a number of properties. I don't care if this editable area is a \[code\]div\[/code\] or an \[code\]input\[/code\]; I only care that it has all of these properties. My problem is that I can do some of these properties with a \[code\]div\[/code\], or an \[code\]input\[/code\], but not both.Here are those properties and how I can currently do them with \[code\]input\[/code\] or \[code\]div\[/code\]. If you add it up, I can't get ALL of them with either option, but I can do it with at least one of them for each property. And that's where the question is: How could I adjust one of these sections to make all 3 work?Browser compatibility requirements: Chrome, Firefox. Jquery acceptable.Property 1: EditableThe user must be able to click inside the area and type content. This is easily done with both options.\[code\]<div contentEditable='true'></div>\[/code\]\[code\]<input type='text>\[/code\]Property 2: Max length (not width) of contentsI want this to limit the length of that which you type, and also if you paste in something huge. This is easily done with an input \[code\]maxlength\[/code\] property:\[code\]<input type='text' maxlength='10'>\[/code\]But it's not so easy with a div, I've got some Jquery that prevents a keypress if you're at 10 characters. But how do you detect if you've got something highlighted to allow you to type? That part has me stuck. Here's my code so far:\[code\]$("#username").keypress( function(e) {len=$("#username").text().length; if(len>10 && !isTextSelected('#username')) { return false; }});function isTextSelected(input) { //determine if there's text selected. I'm not sure where to begin on this?}\[/code\]I imagine it might have something to do with \[code\]document.selection.\[/code\]? I'm not that knowledgeable about Jquery, though, so I'm not sure how to go about it.Property 3: Grows (horizontally) as you typeThis is by default how the \[code\]div\[/code\] behaves. But it's not so easy with an \[code\]input\[/code\]. Here's a solution that doesn't work with pasting text in. Does anyone know a modification to that?And that's that. Can you make them all work together? If so, you're amazing.