benclowney
Member
Hi - I've got a field on my form that is a 'Title' field, ie it outputs a blog post title. I'd like to format it like a textarea field so that when a user types into the box it goes onto the next line, rather than scrolling horizontally. Is this possible?
The form is on http://whatsyourpromise.org.uk/promise
Cheers
The horizontal scrolling is something that's just a default behavior for that input type. It doesn't behave like a textarea so I'm not aware of any way to force line breaks.
What you could do is add a "preview pane" for the text below the field so they can see the entire title displayed. This is similar to what you see in the Gravity Forms admin.. the text changes as you type.
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
$("#input_1_5")
.bind("keyup",
function(){
$("#preview_pane").html( $(this).val() );
});
$("#input_1_5").after("<div id='preview_pane'></div>");
});
</script>this snippet inserts a div called "preview_pane" directly below the input ID "input_1_5" and writes the contents of that input to the div. You'll just need to change the input ID to match your actual form field ID. After that, you can use some CSS to style the preview pane anyway you see fit.
Hope that helps or at least gives you some ideas.
benclowney
Member
Hi Kevin
Thanks very much for your prompt reply
I'm probably not doing this right, but I added the snippet to my header, changed the input ID and adding some preview_pane styling to my stylesheet.
But nothing happened.
Am I doing something wrong?
I'm viewing the source and I'm not seeing the script in your header on that page. You added it to the header.php file?
You're almost there. You have to load the jQuery library before you initialize this script. Just take your script and move it to just before the </ head> tag.
Once you do that, you should be rockin.. here's a screenshot from my test.
