'初心者です。Jqueryで文字数をチェックする機能を実装したいです。
動きなのですが、.input に文字を入力し、文字を入力した段階でその文字数に応じて .rest-count の値が減っていき、最大文字数である30文字以上入力すると .rest-count に .red クラスが追加されて文字色が赤くなり、30文字以内になると、.red クラスが外れ、文字色が元に戻る。(ちなみに改行は文字数に含まない。)
// .keyup() 文字入力後に発火されるイベントを作りたいです。'
'''
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <title>jQuery</title> <link rel="stylesheet" href="../../common/css/reset.css"> <link rel="stylesheet" href="../../common/css/base.css"> <link rel="stylesheet" href="./css/style.css"> </head> <body> <div class="wrapper"> <form class="register"> <div class="input-wrapper"> <input type="text" class="input" placeholder="Input Your Name."> <p class="rest-count">30</p> </div> <button class="register-btn">Register</button> </form> </div> <script src="../../common/js/jquery.js"></script> <script> </script> </body> </html>'''
'''
.clearfix:after {
display: block;
clear: both;
content: '';
}
.wrapper {
padding: 20px;
}
.register {
padding: 10px;
margin: 0 auto;
width: 300px;
background-color: #fff;
box-shadow: 0 2px 2px rgba(0, 0, 0, .4);
}
.input-wrapper {
position: relative;
margin-bottom: 10px;
}
.input {
display: block;
padding: 10px 30px 10px 10px;
width: 100%;
font-size: 14px;
background-color: #eee;
box-shadow: 0 0 2px rgba(0, 0, 0, .4) inset;
}
.rest-count {
position: absolute;
bottom: 5px;
right: 5px;
color: #999;
font-family: Helvetica;
}
.register-btn {
display: block;
padding: 10px;
width: 100%;
font-size: 14px;
font-weight: bold;
color: #fff;
background-color: maroon;
}
.red {
color: red;
}
'''
回答2件
あなたの回答
tips
プレビュー