telephone.html (3248B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Input tel</title> 5 <link rel="author" title="Kazuki Kanamori" href="mailto:yogurito@gmail.com"> 6 <link rel="help" href="https://html.spec.whatwg.org/multipage/#telephone-state-(type=tel)"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 </head> 10 <body> 11 <h1>Input tel</h1> 12 <input type="tel" id="novalue" /> 13 <input type="tel" id="value_with_LF" value="0
1" /> 14 <input type="tel" id="value_with_CR" value="0
1" /> 15 <input type="tel" id="value_with_CRLF" value="0

1" /> 16 <div id="log"> 17 </div> 18 19 <script type="text/javascript"> 20 var element = document.getElementById('novalue'); 21 test(function(){ 22 assert_equals(element.type, 'tel'); 23 }, 'tel type supported on input element'); 24 test(function(){ 25 element.value = '0\u000A1'; 26 assert_equals(element.value, '01'); 27 }, 'User agents must not allow users to insert "LF" (U+000A)'); 28 test(function(){ 29 element.value = '0\u000D1'; 30 assert_equals(element.value, '01'); 31 }, 'User agents must not allow users to insert "CR" (U+000D)'); 32 33 element = document.getElementById('value_with_LF'); 34 test(function(){ 35 assert_equals(element.value, '01'); 36 }, 'The value attribute, if specified, must have a value that contains no "LF" (U+000A)'); 37 38 element = document.getElementById('value_with_CR'); 39 test(function(){ 40 assert_equals(element.value, '01'); 41 }, 'The value attribute, if specified, must have a value that contains no "CR" (U+000D)'); 42 43 test(function(){ 44 element = document.getElementById('novalue'); 45 element.value = '0\u000D\u000A1'; 46 assert_equals(element.value, '01'); 47 48 element = document.getElementById('value_with_CRLF'); 49 assert_equals(element.value, '01'); 50 }, 'The value sanitization algorithm is as follows: Strip line breaks from the value'); 51 52 element = document.getElementById('novalue'); 53 test(function(){ 54 element.value = '+811234'; 55 assert_equals(element.value, '+811234'); 56 }, 'Element can accept the phone number with plus sign(country code)'); 57 test(function(){ 58 element.value = '1234#5678'; 59 assert_equals(element.value, '1234#5678'); 60 }, 'Element can accept the phone number with hash mark(extension number)'); 61 test(function(){ 62 element.value = '123-456-789'; 63 assert_equals(element.value, '123-456-789'); 64 }, 'Element can accept the phone number with hyphen'); 65 test(function(){ 66 element.value = '123.456.789'; 67 assert_equals(element.value, '123.456.789'); 68 }, 'Element can accept the phone number with dots'); 69 test(function(){ 70 element.value = '1 23 4'; 71 assert_equals(element.value, '1 23 4'); 72 }, 'Element can accept the phone number with whitespace'); 73 test(function(){ 74 element.value = ' 1234 '; 75 assert_equals(element.value, ' 1234 '); 76 }, 'Element can accept the phone number with leading & following whitespaces'); 77 test(function(){ 78 element.value = '(03)12345678'; 79 assert_equals(element.value, '(03)12345678'); 80 }, 'Element can accept the phone number with parentheses(area code)'); 81 </script> 82 83 </body> 84 </html>