Control Copy and Paste function ... Javascript??

  • devilwood
  • Silver Member
  • Silver Member
  • User avatar
  • Posts: 437

Post 3+ Months Ago

I have a web form we use internally at my office that has a telephone input field. Well, initially the field was a single input textbox which I thought the best I could do was set it to only maxlength of 10 and I added some javascript to accept only numbers... 10 digit phone number and I stored it in our database as just number with no formatting. So, I then got the bright idea to help people inputting the phone number. So, I split the one textbox into 3 inputs xxx xxx xxxx . I post all three and string them together. I thought this would help people check the phone number entry as (xxx) xxx - xxxx is a lot easier to read than xxxxxxxxxx. However, come to find out some people already have the phone number and they are copying and pasting it into the field. Meaning, the 3 input fields is screwing them up. Is there a way that they can focus on the first field and paste the 10 digit number and my program can break up the string and place the values correctly in the 3 input fields. Here is what the phone number input looks like.

Code: [ Select ]
<div class="inputtxt">
(<input class="textbox" name="phone1_1" id="phone1_1" type="text" size="5" tabindex="1" value="<? echo $fone1_1;?>" maxlength="3" />)
<input class="textbox" name="phone1_2" id="phone1_2" type="text" size="5" tabindex="2" value="<? echo $fone1_2;?>" maxlength="3" />-
<input class="textbox" name="phone1_3" id="phone1_3" type="text" size="8" tabindex="3" value="<? echo $fone1_3;?>" maxlength="4" />            
</div>
  1. <div class="inputtxt">
  2. (<input class="textbox" name="phone1_1" id="phone1_1" type="text" size="5" tabindex="1" value="<? echo $fone1_1;?>" maxlength="3" />)
  3. <input class="textbox" name="phone1_2" id="phone1_2" type="text" size="5" tabindex="2" value="<? echo $fone1_2;?>" maxlength="3" />-
  4. <input class="textbox" name="phone1_3" id="phone1_3" type="text" size="8" tabindex="3" value="<? echo $fone1_3;?>" maxlength="4" />            
  5. </div>


I need to be able to paste 2213339088 into the 3 inputs above.

Is this possible?
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9099
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

To do something like that you first would have to make the maxlength on the first field longer than 3. It has to be long enough to be able to take in the input of the full number.

Once you have done that, then you could use Javascript, or some sort of JavaScript library like jQuery to automatically catch the input and update the fields. Probably wouldn't be too hard with jQuery.
  • devilwood
  • Silver Member
  • Silver Member
  • User avatar
  • Posts: 437

Post 3+ Months Ago

Looks like my best option is to create a paste button that calls a JS function that will retrieve the last copied data from the clipboard, splits it up, and then places the value in each input field. It looks like IE is going to be the only browser that will support this.

Any help or better design is appreciated.
  • devilwood
  • Silver Member
  • Silver Member
  • User avatar
  • Posts: 437

Post 3+ Months Ago

Ok, BWM I'm going to try that. That was my first thought, but I have some code already that counts the first field and auto-focuses so as the user types it jumps from area code and so on and I didn't know how nicely it would play with that code. Like I said I revamped it to help users that are typing in the fields and users that paste in the fields are complaining.

I think allowing more than 3 maxlength and just letting them paste in the first field and then my JS can look at strlen and determine what it needs to do. Will I need an onpaste event or will that fire from an onpropertychange event?
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9099
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

I believe it would fire with an onChange or keyup event. All you need to do is once it fires count how many numbers have been inputted and if its more than 3 do some work to break it up and then update the fields appropriately. Make sense?
  • devilwood
  • Silver Member
  • Silver Member
  • User avatar
  • Posts: 437

Post 3+ Months Ago

HAHA. Got it working over the weekend. Thanks BWB.

I got a clipboard button as well for those who don't realize they can paste inside the area code.

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: ocbohye and 58 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.