I need to set the Note/Comments input section of this page so that the width is the same number of pixels as the copy, which I believe is 440 px. Since this is a Perch CMS field I was told I need to do this in CSS. I could probably setup a style in Freeway called .mywidth and then use the following code, but where do I put the code?
I’m not aware of this attribute being valid on a textarea. What is it meant to do? HTML5 allows the maxlength attribute, but not all browsers pay any attention to it. HTML4 doesn’t have a maxlength on the textarea, only on a text input. There are tons of JavaScript tricks out there to help maintain a limit on your users’ input.
Thanks Walter. Todd helped me figure this out. It was a lot simpler that I had thought. Is there anyway you can post a link to the JavaScript tricks you’re talking about?
A textarea would be a waste on a phone number. For that, you can use a normal text input. If you’re looking to provide a “mask” for phone formatting (and you have a single country to support) then you can do something like this in Prototype:
var t = new Template('(#{0}#{1}#{2}) #{3}#{4}#{5}-#{6}#{7}#{8}#{9}');
$$('input[name*="phone"]').each(function(elm){
var vals = {};
elm.observe('keyup', function(evt){
var current = this.getValue().gsub(/[^d]+/,'').split('');
$A($R(0,9)).each(function(digit){
if(!!current[digit]){
vals[digit.toString()] = current[digit];
}else{
vals[digit.toString()] = '';
}
});
this.setValue(t.evaluate(vals));
});
});
Now this behaves a little oddly, the replacement happens on every keystroke, which puts the cursor at the end of the substitution rather than staying right where you’re typing. If you don’t watch what’s happening, it works perfectly and takes a 10-digit number and formats it into a US phone number. I’d have to think a little bit more about how it could be improved. A quick way to improve this without any head-bending would be to format on blur rather than keystroke, so change the event in the observer look to ‘blur’ from ‘keyup’.
Walter
On Sep 15, 2012, at 12:13 PM, RavenManiac wrote:
One in particular I’m interested in is styling phone number input.
Something like this for a total length (add to the field using the Extended attributes editor:
Name: onkeyup
Value (make sure this is all one line):
this.value = this.value.substring(0, 200);
Okay, then click new in the Extended dialog again and repeat the above, only change onkeyup to onchange.
This will simply truncate the input at the 200 character mark without any warning or whatnot. If you search the Web for 'textarea character limit" you will also see a bunch of examples of how to create a little “countdown” like the Twitter Web app to show the user how close they are to the edge.
Walter
On Sep 15, 2012, at 12:12 PM, RavenManiac wrote:
Thanks Walter. Todd helped me figure this out. It was a lot simpler that I had thought. Is there anyway you can post a link to the JavaScript tricks you’re talking about?
A textarea would be a waste on a phone number. For that, you can use a normal text input. If you’re looking to provide a “mask” for phone formatting (and you have a single country to support) then you can do something like this in Prototype:
var t = new Template(‘(#{0}#{1}#{2}) #{3}#{4}#{5}-#{6}#{7}#{8}#{9}’);
$$(‘input[name*=“phone”]’).each(function(elm){
var vals = {};
elm.observe(‘keyup’, function(evt){
var current = this.getValue().gsub(/[^d]+/,‘’).split(‘’);
$A($R(0,9)).each(function(digit){
if(!!current[digit]){
vals[digit.toString()] = current[digit];
}else{
vals[digit.toString()] = ‘’;
}
});
this.setValue(t.evaluate(vals));
});
});
Now this behaves a little oddly, the replacement happens on every keystroke, which puts the cursor at the end of the substitution rather than staying right where you’re typing. If you don’t watch what’s happening, it works perfectly and takes a 10-digit number and formats it into a US phone number. I’d have to think a little bit more about how it could be improved. A quick way to improve this without any head-bending would be to format on blur rather than keystroke, so change the event in the observer look to ‘blur’ from ‘keyup’.
Walter
On Sep 15, 2012, at 12:13 PM, RavenManiac wrote:
One in particular I’m interested in is styling phone number input.
So would I just add this to the existing phone number code?
You would apply this code to the page, using Protaculous and the top Function Body dialog. Choose prototype-packed from the Library picker. Then just name your field anything that includes the word ‘phone’ (lower-case) in the Name field of the third tab of the Inspector.
You can have as many different phone fields on the page, and this one blob of code will extend all of them.
Walter
On Sep 15, 2012, at 1:58 PM, RavenManiac wrote:
On 15 Sep 2012, 4:40 pm, waltd wrote:
A textarea would be a waste on a phone number. For that, you can use a normal text input. If you’re looking to provide a “mask” for phone formatting (and you have a single country to support) then you can do something like this in Prototype:
var t = new Template(‘(#{0}#{1}#{2}) #{3}#{4}#{5}-#{6}#{7}#{8}#{9}’);
$$(‘input[name*=“phone”]’).each(function(elm){
var vals = {};
elm.observe(‘keyup’, function(evt){
var current = this.getValue().gsub(/[^d]+/,‘’).split(‘’);
$A($R(0,9)).each(function(digit){
if(!!current[digit]){
vals[digit.toString()] = current[digit];
}else{
vals[digit.toString()] = ‘’;
}
});
this.setValue(t.evaluate(vals));
});
});
Now this behaves a little oddly, the replacement happens on every keystroke, which puts the cursor at the end of the substitution rather than staying right where you’re typing. If you don’t watch what’s happening, it works perfectly and takes a 10-digit number and formats it into a US phone number. I’d have to think a little bit more about how it could be improved. A quick way to improve this without any head-bending would be to format on blur rather than keystroke, so change the event in the observer look to ‘blur’ from ‘keyup’.
Walter
On Sep 15, 2012, at 12:13 PM, RavenManiac wrote:
One in particular I’m interested in is styling phone number input.
So would I just add this to the existing phone number code?
The code on this page is much neater than my first attempt, and it also avoids the UX issues I pointed out earlier.
Walter
On Sep 15, 2012, at 5:17 PM, Walter Lee Davis wrote:
You would apply this code to the page, using Protaculous and the top Function Body dialog. Choose prototype-packed from the Library picker. Then just name your field anything that includes the word ‘phone’ (lower-case) in the Name field of the third tab of the Inspector.
You can have as many different phone fields on the page, and this one blob of code will extend all of them.
Walter
On Sep 15, 2012, at 1:58 PM, RavenManiac wrote:
On 15 Sep 2012, 4:40 pm, waltd wrote:
A textarea would be a waste on a phone number. For that, you can use a normal text input. If you’re looking to provide a “mask” for phone formatting (and you have a single country to support) then you can do something like this in Prototype:
var t = new Template(‘(#{0}#{1}#{2}) #{3}#{4}#{5}-#{6}#{7}#{8}#{9}’);
$$(‘input[name*=“phone”]’).each(function(elm){
var vals = {};
elm.observe(‘keyup’, function(evt){
var current = this.getValue().gsub(/[^d]+/,‘’).split(‘’);
$A($R(0,9)).each(function(digit){
if(!!current[digit]){
vals[digit.toString()] = current[digit];
}else{
vals[digit.toString()] = ‘’;
}
});
this.setValue(t.evaluate(vals));
});
});
Now this behaves a little oddly, the replacement happens on every keystroke, which puts the cursor at the end of the substitution rather than staying right where you’re typing. If you don’t watch what’s happening, it works perfectly and takes a 10-digit number and formats it into a US phone number. I’d have to think a little bit more about how it could be improved. A quick way to improve this without any head-bending would be to format on blur rather than keystroke, so change the event in the observer look to ‘blur’ from ‘keyup’.
Walter
On Sep 15, 2012, at 12:13 PM, RavenManiac wrote:
One in particular I’m interested in is styling phone number input.
So would I just add this to the existing phone number code?
Not forgetting that HTML5 gives us the pattern and placeholder attributes which will validate the input based on a well crafted regular expression and display a placeholder value respectively; http://www.w3schools.com/html5/html5_form_attributes.asp
This won’t provide the live updating of Walter’s example but should be a lot more lightweight. Now all I need to do is brush up on my regular expressions!
Regards,
Tim.
On 16 Sep 2012, at 07:27, Walter Lee Davis wrote:
The code on this page is much neater than my first attempt, and it also avoids the UX issues I pointed out earlier.
