jQuery 2月メモ ０１
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<title>jqery 2017/02</title>
</head>
<body>
<section>
<div id="bali">
<dl>
<dt>名前【必須】</dt>
<dd><input type="text" value="" name="name" class="required"></dd>
</dl>
<dl>
<dt>E-MAIL</dt>
<dd><input type="text" value="" name="mail"></dd>
</dl>
<dl>
<dt>内容【必須】</dt>
<dd><textarea value="" name="text" class="required"></textarea></dd>
</dl>
</div>
</section>
<!-- 文字数 -->
<section id="text-count">
<h1 style="margin: 0;padding: 0.3em;">俳句</h1>
<dvi class="inputCount">
<div class="count"></div>
<textarea></textarea>
</dvi>
</section>
<!-- デバイス判別 画像 -->
<section id="dve-img">
<h1 style="margin: 0;padding: 0.3em;">デバイス判別</h1>
<p><img src="img/img_300.png" class="deviceImg">
</section>
<script>
/*--- フォーム バリデーション----*/
$(function(){
$('.required').on('keydown keyup keypress change focus blur',
function(){
if($(this).val() == ''){
$(this).css({background: '#ffcccc'});
} else {
$(this).css({background: '#fff'});
}
}).change();
});
/*--- 文字数制限 ----*/
$(function(){
var countMax = 17,
countThis = $('.inputCount');
countThis.find('.count').text(countMax);
countThis.find('textarea').on('keydown keyup keypress change', function(){
var thisvalueLength = $(this).val().length,
countDown = countMax - thisvalueLength;
countThis.find('.count').text(countDown);
if (countDown < 0) {
countThis.find('.count').addClass('countBelow');
} else {
countThis.find('.count').removeClass('countBelow');
}
});
});
/*--- デバイス img ----*/
$(function(){
if(window.devicePixelRation == 1) {
$('.deviceImg').attr('src','img/img_300.png');
} else if (window.devicePixelRation == 2) {
$('.deviceImg').attr('src','img/img_600.png');
} else if (window.devicePixelRation == 3) {
$('.deviceImg').attr('src','img/img_900.png');
}
});
</script>
</body>
</html>
