input に入力した文字が一文字ずつ表示されていく
See the Pen
by ぼぶ@朝活input中 (@bobu_6326)
on CodePen.
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
</head>
<body>
<input type="text" placeholder="ここに入力">
<div class="box"></div>
</body>
</html>
JQuery
$(function(){
$('input').on('change',function(){
$('.box').empty();
let word = $('input').val();
let word_part = word.split("");
let word_count = word.length;
for(let i=0;i<word_count; i++){
$('.box').append('<span>'+word_part[i]+'</span>');
$('.box span').hide();
$('.box span').eq(i).delay(i*500).fadeIn();
}
})
});解説
HTML の input type=”text” に入力した文字が box 内の span として一文字ずつ表示されていく
JQuery
- $(‘input’).on(‘change’,function(){ } = input の内容が書き換えられた時にイベントを起こす
- $(‘.box’).empty(); = .box の子要素を全消去する
- let word = 変数。input に入力された文字を取得する
- let word_part = 配列。word に取得した文字を .split(“”) で一文字ずつに分解する
- let word_count = 変数。word に取得された文字の文字数を取得
- for で word_count に取得された値分ループさせる
- $(‘box’).append(1) = .box 直下に<span> 変数word_part[i] </span> を追加する [i] をつける事により、ループの度に次の文字が表示されていく
- $(‘.box span’).hide() = .box span を表示されなくする
- $(‘.box span’).eq(i).delay(i*500).fadeIn(); = .box span の一文字につき 0.5秒ずつ遅れて(delay(i*500))表示(fadeIn)させる
