jQuery文本框输入文字放大预览

1、新建html文档。

2、书写hmtl代码。<div class="fill_ipt"> <input type="text" class="showbig" name="" id="" value="" placeholder="在这里输入" /></div>

3、书写css代码。<style>.fill_ipt { position: relative; margin: 200px 0 0 500px; }.showbig { display: block; width: 400px; height: 40px; border: 1px solid #404040; }input { display: block; width: 100%; height: 100%; outline: none; border: none; text-indent: 20px; }.bigtx { height: 30px; min-width: 10px; line-height: 30px; padding: 0px 8px; border: 1px solid #C9CFDA; background: #f5f7fc; box-shadow: 0 0 10px rgba(120,144,156,0.2); position: absolute; left: 0; top: -0px; font-size: 24px; color: #1c2b36; line-height: normal; /*display: none;*/opacity: 0; transition: all 0.2s; }.bigtx span { font-size: 24px; color: #1c2b36; }</style>

4、书写并添加js代码。<script src="js/jquery.min.js"></script>

5、代码整体结构。

6、查看效果。