Auto format phone number for text entry box | XM Community
Solved

Auto format phone number for text entry box

  • 30 October 2018
  • 13 replies
  • 599 views
Akdashboard
Rank
Userlevel 7
Badge +6
My 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.
icon

Best answer by Anonymous 30 October 2018, 19:45

View original

13 replies

A
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;
}
}
Akdashboard
Rank
Userlevel 7
Badge +6
@Shashi

Thank you. I am getting the following error, can you advise? - Also, sorry for using a picture.
!
A
> @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

`});`
Akdashboard
Rank
Userlevel 7
Badge +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*/

});"
TomG
Rank
Userlevel 7
Badge +27
@Akdashboard - cleave.js does phone input formatting.
A
> @TomG said:
> @Akdashboard - cleave.js does phone input formatting.

Thanks @TomG for sharing
K
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
TomG
Rank
Userlevel 7
Badge +27
@kdelacy - cleave.js does numeric input formatting too. See the numeral formatting section at the link provided.
K
Thank you @TomG . Do you know where in the JavaScript I would place the code?
!
TomG
Rank
Userlevel 7
Badge +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.
Q
Badge
@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!
Q
Badge
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?
TomG
Rank
Userlevel 7
Badge +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


Terms & Conditions