ソースコード掲載：Lesson11「実践！フォーム入力自動成形を作ろう！」

こちらでは、プログラミングを体系的に学ぶ事のできる「ウェブカツ!!」にて使用している
ソースコードを掲載しております。

1 index.html
2 style.css
3 main.js

index.html

<!DOCTYPE html>
<html lang="ja">
 <head>
 <meta charset="utf-8">
 <title>サンプルホームページ</title>
 <link rel="stylesheet" type="text/css" href="style.css">
 <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
 </head>
 <body>
 <header class="site-width">
 <h1><a href="index.html">WEBUKATU</a></h1>
 <nav id="top-nav">
 <ul>
 <li><a href="index.html">HOME</a></li>
 <li><a href="#about">ABOUT</a></li>
 <li><a href="#merit">MERIT</a></li>
 <li><a href="#recruit">RECRUIT</a></li>
 <li><a href="contact.html">CONTACT</a></li>
 </ul>
 </nav>
 </header>
 <div id="main">
 
 <!-- Contact -->
 <section id="contact" class="site-width">
 <h1 class="title">CONTACT</h1>
 <form>
 <div class="form-group">
 <label>電話番号
 <input type="text" name="phone" class="format-number">
 </label>
 </div>
 <input type="submit" name="submit" value="送信">
 </form>
 </section>
 
 
 </div>
 <footer>
 Copyright <a href="http://webukatu.com/">ウェブカツ!!サンプルホームページ</a>. All Rights Reserved.
 </footer>
 <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
 <script src="main.js"></script>
 </body>
</html>

<!DOCTYPE html>

<head>

<title>サンプルホームページ</title>

</head>

<body>

<h1><a href="index.html">WEBUKATU</a></h1>

<ul>

<li><a href="#about">ABOUT</a></li>

<li><a href="#merit">MERIT</a></li>

<li><a href="#recruit">RECRUIT</a></li>

<li><a href="contact.html">CONTACT</a></li>

</ul>

</nav>

</header>

<h1 class="title">CONTACT</h1>

<form>

<label>電話番号

</label>

</div>

</form>

</section>

</div>

</footer>

</body>

</html>

style.css

body{
    color: #444;
    margin: 0;
    padding: 0;
    line-height: 150%;
}

/*トップバナー*/
#top-baner{
    width: 100%;
}

/*ヘッダー部分*/
header{
    margin-bottom: 15px;
    height: 200px;
}
header h1{
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    margin: 15px;
  padding: 20px;
    text-align: center;
    float: left;
  height: 150px;
    width: 150px;
    background: #f6f5f5;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    line-height: 150px;
}
header h1 a{
    color: #333;
    text-decoration: none;
}

/*ナビゲーション*/
#top-nav{
    float: right;
    width: 500px;
    height: 200px;
    position: relative;
}
nav a{
    padding: 10px 15px;
    color: #444;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
}
nav a:hover{
    text-decoration: underline;
}
#top-nav ul{
    height: 40px;
    width: 450px;
    position: absolute;
    bottom: 0;
    right: 0;
    list-style: none;
}
#top-nav ul li{
    float: left;
}

/*コンテンツ横幅*/
.site-width{
    width: 980px;
    margin: 0 auto;
}

section h1.title{
    font-family: 'Montserrat', sans-serif;
    text-align: center;
}


/*フッター*/
footer{
    font-size: 12px;
    padding: 15px;
    background: #333;
    text-align: center;
    color: #f6f5f5;
}
footer a{
    color: #f6f5f5;
}

/*contact*/
#contact{
    margin-bottom: 100px;
}

/*フォーム*/
form{
    width: 50%;
    margin: 0 auto;
}
input,textarea{
    font-size: 18px;
    margin-bottom: 15px;
}
input[type="text"]{
    width: 100%;
    height: 60px;
    border: none;
    background: #f6f5f5;
    padding: 10px;
    box-sizing: border-box;
}
textarea{
    width: 100%;
    height: 400px;
    border: none;
    background: #f6f5f5;
    padding: 10px;
    box-sizing: border-box;
}
input[type="submit"]{
    background: #333;
    border: none;
    padding: 15px 30px;
    color: white;
    float: right;
}
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #f6f5f5 inset;
}


/*バリデーション*/
.help-block{
    font-size:14px;
    margin-left: 10px;
}
/*エラー時*/
.has-error input, .has-error textarea{
    border: 1px solid #ff4d4b;
}
.has-error .help-block, .has-error label{
    color: #ff4d4b;
}
/*サクセス時*/
.has-success input, .has-success textarea{
    border: 1px solid #2fb4ce;
}
.has-success .help-block, .has-success label{
    color: #2fb4ce;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

body{

color: #444;

margin: 0;

padding: 0;

line-height: 150%;

}

/*トップバナー*/

#top-baner{

width: 100%;

}

/*ヘッダー部分*/

header{

margin-bottom: 15px;

height: 200px;

}

header h1{

font-size: 20px;

font-family: 'Montserrat', sans-serif;

margin: 15px;

padding: 20px;

text-align: center;

float: left;

height: 150px;

width: 150px;

background: #f6f5f5;

border-radius: 100px;

-webkit-border-radius: 100px;

-moz-border-radius: 100px;

line-height: 150px;

}

header h1 a{

color: #333;

text-decoration: none;

}

/*ナビゲーション*/

#top-nav{

float: right;

width: 500px;

height: 200px;

position: relative;

}

nav a{

padding: 10px 15px;

color: #444;

text-decoration: none;

font-size: 14px;

font-weight: bold;

}

nav a:hover{

text-decoration: underline;

}

#top-nav ul{

height: 40px;

width: 450px;

position: absolute;

bottom: 0;

right: 0;

list-style: none;

}

#top-nav ul li{

float: left;

}

/*コンテンツ横幅*/

.site-width{

width: 980px;

margin: 0 auto;

}

section h1.title{

font-family: 'Montserrat', sans-serif;

text-align: center;

}

/*フッター*/

footer{

font-size: 12px;

padding: 15px;

background: #333;

text-align: center;

color: #f6f5f5;

}

footer a{

color: #f6f5f5;

}

/*contact*/

#contact{

margin-bottom: 100px;

}

/*フォーム*/

form{

width: 50%;

margin: 0 auto;

}

input,textarea{

font-size: 18px;

margin-bottom: 15px;

}

input[type="text"]{

width: 100%;

height: 60px;

border: none;

background: #f6f5f5;

padding: 10px;

box-sizing: border-box;

}

textarea{

width: 100%;

height: 400px;

border: none;

background: #f6f5f5;

padding: 10px;

box-sizing: border-box;

}

input[type="submit"]{

background: #333;

border: none;

padding: 15px 30px;

color: white;

float: right;

}

input:-webkit-autofill {

-webkit-box-shadow: 0 0 0px 1000px #f6f5f5 inset;

}

/*バリデーション*/

.help-block{

font-size:14px;

margin-left: 10px;

}

/*エラー時*/

.has-error input, .has-error textarea{

border: 1px solid #ff4d4b;

}

.has-error .help-block, .has-error label{

color: #ff4d4b;

}

/*サクセス時*/

.has-success input, .has-success textarea{

border: 1px solid #2fb4ce;

}

.has-success .help-block, .has-success label{

color: #2fb4ce;

}

main.js

$(function(){


 $(".format-number").change(function(){

   //フォームの値を取得
   var format_before = $(this).val();

   //ハイフンが入力されていた場合にまずハイフンを削除する
   format_before  = format_before.replace('-','');

   //全角英数字を半角に変換
   var format_after = format_before.replace(/[Ａ-Ｚａ-ｚ０-９]/g,function(s){ return String.fromCharCode(s.charCodeAt(0)-0xFEE0) });

   //入力された文字数が１１文字だった場合
   if(format_after.length === 11){
      //ハイフンを挿入して要素内を書き換える
        $(this).val(format_after.substr(0,3)+'-'+format_after.substr(3,4)+'-'+format_after.substr(7,4));
    }else{
      //何もせずに要素内を書き換える
      $(this).val(format_after);
    }

 });

});

$(function(){

$(".format-number").change(function(){

//フォームの値を取得

var format_before = $(this).val();

//ハイフンが入力されていた場合にまずハイフンを削除する

format_before = format_before.replace('-','');

//全角英数字を半角に変換

var format_after = format_before.replace(/[Ａ-Ｚａ-ｚ０-９]/g,function(s){ return String.fromCharCode(s.charCodeAt(0)-0xFEE0) });

//入力された文字数が１１文字だった場合

if(format_after.length === 11){

//ハイフンを挿入して要素内を書き換える

$(this).val(format_after.substr(0,3)+'-'+format_after.substr(3,4)+'-'+format_after.substr(7,4));

}else{

//何もせずに要素内を書き換える

$(this).val(format_after);

}

});

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。