Solved
Auto format phone number for text entry box
+6My guess is that this will take specific code because I haven't found the feature native in Qualtrics.
Is it possible to auto-format a text entry box?
The exact example I am trying to do is format 10 numbers entered in a text box to a standard phone number format, like 123-456-7890. All I want them to enter is 1234567890.
Best answer by Anonymous
Hello @Akdashboard ,
Use the below code for your requirement. Paste it in the `js(onReady)`
jQuery(".InputText").on("cut copy paste",function(e) {
e.preventDefault();
});
jQuery(".InputText").on('keypress',function(){
if(event.which != 8 && isNaN(String.fromCharCode(event.which))){
event.preventDefault(); //stop character from entering input
}
var s = this.value.replace(/-/g,'');
if(s.length==10){
event.preventDefault();
}
if(s.length!=0){
if(s.length>=3 && s.length<=5){
var s1 = s.slice(0,3);
var s2 =s.slice(3,s.length);
this.value=s1+"-"+s2;
}
if(s.length>=6){
var s1 = s.slice(0,3);
var s2 =s.slice(3,6);
var s3=s.slice(6,s.length);
this.value=s1+"-"+s2+"-"+s3;
}
}
View originalHello @Akdashboard ,
Use the below code for your requirement. Paste it in the `js(onReady)`
jQuery(".InputText").on("cut copy paste",function(e) {
e.preventDefault();
});
jQuery(".InputText").on('keypress',function(){
if(event.which != 8 && isNaN(String.fromCharCode(event.which))){
event.preventDefault(); //stop character from entering input
}
var s = this.value.replace(/-/g,'');
if(s.length==10){
event.preventDefault();
}
if(s.length!=0){
if(s.length>=3 && s.length<=5){
var s1 = s.slice(0,3);
var s2 =s.slice(3,s.length);
this.value=s1+"-"+s2;
}
if(s.length>=6){
var s1 = s.slice(0,3);
var s2 =s.slice(3,6);
var s3=s.slice(6,s.length);
this.value=s1+"-"+s2+"-"+s3;
}
}
1 person likes this
+6@Shashi
Thank you. I am getting the following error, can you advise? - Also, sorry for using a picture.
!
> @Akdashboard said:
> @Shashi
>
> Thank you. I am getting the following error, can you advise? - Also, sorry for using a picture.
>
>
paste below brackets before `Qualtrics.SurveyEngine.addOnUnload(function()` this line
`});`
+6@Shashi
I am sorry that I am misunderstanding something. I am still getting an "Unexpected end of input" error. I've tried placing the code in numerous section under the OnReady section and cannot seem to find the right spot.
This is my direct understanding of your last comment.
"Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
});
jQuery(".InputText").on("cut copy paste",function(e) {
e.preventDefault();
});
jQuery(".InputText").on('keypress',function(){
if(event.which != 8 && isNaN(String.fromCharCode(event.which))){
event.preventDefault(); //stop character from entering input
}
var s = this.value.replace(/-/g,'');
if(s.length==10){
event.preventDefault();
}
if(s.length!=0){
if(s.length>=3 && s.length<=5){
var s1 = s.slice(0,3);
var s2 =s.slice(3,s.length);
this.value=s1+"-"+s2;
}
if(s.length>=6){
var s1 = s.slice(0,3);
var s2 =s.slice(3,6);
var s3=s.slice(6,s.length);
this.value=s1+"-"+s2+"-"+s3;
}
}
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});"
Hi all,
Would there be an easy adjustment to this code for commas instead of a phone number? We have a text entry field that we would like to format so that the number entered shows up with commas.
Any advice is appreciated! Thanks
+27+27> @kdelacy said:
> Thank you @TomG . Do you know where in the JavaScript I would place the code?
> !
>
>
First you would load the cleave library from jsDelivr using a `<script>` tag in your survey header. Then you would attach cleave to your input field in the addOnload function. Refer to the cleave readme on github for information and documentation.
>
>
First you would load the cleave library from jsDelivr using a `<script>` tag in your survey header. Then you would attach cleave to your input field in the addOnload function. Refer to the cleave readme on github for information and documentation.
@Akdashboard, I received the same error even after placing the JS in the instructed location.
@TomG, I attempted to use cleave.js and loaded into the head of my survey, but not succeeding at targeting the specific phone field. I'd like to use the .input-10 example here: https://jsfiddle.net/nosir/aLnhdf3z/
However, I've tried .InputText and looked in my browser inspector to use another class (.QR-QID2-3), but I'm unsuccessful in targeting. Is there a way of adding a unique class to a field? Also, in the fields JS, I added:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
new Cleave('.QR-QID2-3t', {
numericOnly: true,
blocks: [0, 3, 0, 3, 4],
delimiters: ["(", ")", " ", "-"]
});
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
What am I doing wrong? Thanks!
I figured it out. I needed to target the full class .inputText.QR-QID2-3t. There's a small bug though -- when I add JS, it sets the fields width style from 50% to 60px. Any thoughts?
+27> @quincyadam said:
> I figured it out. I needed to target the full class .inputText.QR-QID2-3t. There's a small bug though -- when I add JS, it sets the fields width style from 50% to 60px. Any thoughts?
You can use JS to change it back to 50% after you attach cleave to it.
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.