Page 1 of 1
Limit number of characters in Text Box (show count down)
Posted: Sat May 12, 2012 1:28 am
by samolesong76
I am setting up a LEAVE A COMMENT box on my home page. I want to limit the number of characters they type in the box and actually show a VISUAL count down underneath the text box. This is so they will know how many they have left. Any one help free for me?
Re: Limit number of characters in Text Box (show count down)
Posted: Sat May 12, 2012 1:35 am
by Avvici
Simple Javascript will do this for you. The one I have coded for you has limit of 200. You can change that to what you want inside the function(s) The <span id="discussCommentsRemainingChars" style="font-size: 9px; margin: 3px 0px 0px 20px; text-align:center;"> is where the count down will show.
In your home.tpl place your text area anywhere you want:
Code: Select all
<p> <textarea name="comments" maxlength="200" id="comments"cols="21" rows="10" onkeyup="calculateDiscussCommentsRemainingChars(); return ismaxlength_discussComments(this);" onclick="clearComments(); ">Write your comments here...</textarea><br /><span id="discussCommentsRemainingChars" style="font-size: 9px; margin: 3px 0px 0px 20px; text-align:center;"> 200 characters remaining </span><p>
Now open catalog/view/javascript/common.js and place these functions below EVERYTHING after the last }.
Code: Select all
function calculateDiscussCommentsRemainingChars() {
var remaining;
if (document.getElementById('comments').value.length <= 200) {
remaining = 200-document.getElementById('comments').value.length;
document.getElementById('discussCommentsRemainingChars').innerHTML = + remaining.toString() + " characters remaining ";
} else {
document.getElementById('discussCommentsRemainingChars').innerHTML = " 0 characters remaining ";
}
}
function ismaxlength_discussComments(obj){
var mlength=obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : ""
if (obj.getAttribute && obj.value.length>mlength)
obj.value=obj.value.substring(0,mlength)
}
function clearComments(){
$( "#comments" ).val("");
}
I even added a function that will clear the field when clicked on. If you don't want that then just delete onclick="clearComments(); from the text area. This will work as long as you call the ID of the text area field. I made it "comments" for the text area and id="discussCommentsRemainingChars" for the count down box. You can make it whatever you like.
Re: Limit number of characters in Text Box (show count down)
Posted: Sat May 12, 2012 1:40 am
by samolesong76
Damn...this works good. I'd spent 4 day's trying to do it. So if I want to change the limit I work this? value.length <= 200
Re: Limit number of characters in Text Box (show count down)
Posted: Sat May 12, 2012 1:41 am
by Avvici
Yes just change the 200 to whatever number. Don't screw with anything else.
Re: Limit number of characters in Text Box (show count down)
Posted: Fri May 25, 2012 1:13 am
by ocmr
Hi,
I was thinking of adding the same feature but for textarea option for products. Could you help me with that? And is there any chance that I could find an extension that gives an option to adjust the limit for different products.
Thanks
Re: Limit number of characters in Text Box (show count down)
Posted: Fri May 25, 2012 4:35 am
by Avvici
That would take quite a bit more customizing because if you were to add multiple option text areas then all would have a newly generated ID on the fly.This id would have to match up with the id of the text area as well as the id of the COUNTER field. The below code is what you would start working with.
Code: Select all
if (ui.item.type == 'textarea') {
html += ' <tr>';
html += ' <td><?php echo $entry_option_value; ?></td>';
html += ' <td><textarea name="product_option[' + option_row + '][option_value]" cols="40" rows="5"></textarea></td>';
html += ' </tr>';
}
Re: Limit number of characters in Text Box (show count down)
Posted: Sat May 11, 2013 1:35 am
by modernmagic
I have the same question but I want to increase the 200 character limit for the product return description.
Where and how can I change the 200 limit?
Re: Limit number of characters in Text Box (show count down)
Posted: Sat May 11, 2013 2:13 am
by Avvici
modernmagic wrote:I have the same question but I want to increase the 200 character limit for the product return description.
Where and how can I change the 200 limit?
I think its 255, not 200.
The code you change is:
Code: Select all
if ((utf8_strlen($this->request->post['product']) < 1) || (utf8_strlen($this->request->post['product']) > 255)) {
$this->error['product'] = $this->language->get('error_product');
}
/catalog/controller/account/return.php