diff --git a/demo/index.html b/demo/index.html index 3fe3f45..d895830 100644 --- a/demo/index.html +++ b/demo/index.html @@ -46,5 +46,15 @@

Custom error message, auto-validates on blur

+ +

No country code, parentheses US format

+
+ + +
diff --git a/gold-phone-input.html b/gold-phone-input.html index 61be6a1..df8c6f2 100644 --- a/gold-phone-input.html +++ b/gold-phone-input.html @@ -30,9 +30,9 @@ By default, the phone number is considered to be a US phone number, and will be validated according to the pattern `XXX-XXX-XXXX`, where `X` is a -digit, and `-` is the separating dash. If you want to customize the input +digit, and `-` is the separating dash. Formatting also supports single spaces. If you want to customize the input for a different area code or number pattern, use the `country-code` and -`phone-number-pattern` attributes +`phone-number-pattern` attributes. [[label]]
- +[[countryCode]] - + + +[[countryCode]] + 10) { + this.updateValueAndPreserveCaret(value.trim()); + this._handleAutoValidate(); + return; + } // Fill in the dashes according to the specified pattern. + var leftParenIndex = this.phoneNumberPattern.indexOf('('); + var leftParenAdded = false; + + var rightParenIndex = this.phoneNumberPattern.indexOf(')') - 1; + var rightParenAdded = false; + + var currentSpaceIndex = 0; var currentDashIndex = 0; - var totalDashesAdded = 0; + + var totalCharactersAdded = 0; + for (var i = 0; i < value.length; i++) { + currentDashIndex = this.phoneNumberPattern.indexOf('-', currentDashIndex); - // Since we remove any formatting first, we need to account added dashes + currentSpaceIndex = this.phoneNumberPattern.indexOf(' ', currentSpaceIndex); + + // Since we remove any formatting first, we need to account added dashes, etc. // when counting the position of new dashes in the pattern. - if (shouldFormat && i == (currentDashIndex - totalDashesAdded)) { + + if (i == leftParenIndex) { + formattedValue += '('; + leftParenAdded = true; + totalCharactersAdded++; + } + + if (i == rightParenIndex) { + formattedValue += ')'; + rightParenAdded = true; + totalCharactersAdded++; + } + + if (i == (currentSpaceIndex - totalCharactersAdded)) { + formattedValue += ' '; + currentSpaceIndex++; + totalCharactersAdded++; + } + + if (i == (currentDashIndex - totalCharactersAdded)) { formattedValue += '-'; currentDashIndex++; - totalDashesAdded++; + totalCharactersAdded++; } formattedValue += value[i]; @@ -234,12 +318,21 @@ var updatedDashesBeforeCaret = formattedValue.substr(0, start).split('-').length - 1; var dashesDifference = updatedDashesBeforeCaret - initialDashesBeforeCaret; + var updatedSpacesBeforeCaret = formattedValue.substr(0, start+1).split(' ').length - 1; + var spacesDifference = updatedSpacesBeforeCaret - initialSpacesBeforeCaret; + + var updatedLeftParenBeforeCaret = formattedValue.substr(0, start).split('(').length - 1; + var leftParenDifference = updatedLeftParenBeforeCaret - initialLeftParenBeforeCaret; + + var updatedRightParenBeforeCaret = formattedValue.substr(0, start).split(')').length - 1; + var rightParenDifference = updatedRightParenBeforeCaret - initialRightParenBeforeCaret; + // Note: this will call _onValueChanged again, which will move the // cursor to the end of the value. Correctly adjust the caret afterwards. this.updateValueAndPreserveCaret(formattedValue.trim()); // Advance or back up the caret based on the change that happened before it. - this.$.input.selectionStart = this.$.input.selectionEnd = start + dashesDifference; + this.$.input.selectionStart = this.$.input.selectionEnd = start + spacesDifference + dashesDifference + leftParenDifference + rightParenDifference; this._handleAutoValidate(); }, diff --git a/test/basic.html b/test/basic.html index e9a9ead..e6baa0a 100644 --- a/test/basic.html +++ b/test/basic.html @@ -41,6 +41,14 @@ + + + +