js网页键盘输入提示特效代码下载


js网页键盘输入提示特效代码下载
js网页键盘输入提示特效代码下载以及网页键盘、输入提示等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script  src="js/script.js"></script>

3. HTML代码

<div class="container">
  <div class="textbox__container">
    <textarea autofocus name="textbox" cols="128" rows="10" class="textbox" placeholder="键盘上输入以后查看软键盘的反应..."></textarea>
  </div>
  <div class="container__content">
    <div class="keyboard">
    <div class="keyboard__row">
      <div class="keyboard__keys">
        <span class="key"><p class="key__letter">Q</p></span>
        <span class="key"><p class="key__letter">W</p></span>
        <span class="key"><p class="key__letter">E</p></span>
        <span class="key"><p class="key__letter">R</p></span>
        <span class="key"><p class="key__letter">T</p></span>
        <span class="key"><p class="key__letter">Y</p></span>
        <span class="key"><p class="key__letter">U</p></span>
        <span class="key"><p class="key__letter">I</p></span>
        <span class="key"><p class="key__letter">O</p></span>
        <span class="key"><p class="key__letter">P</p></span>
      </div>
    </div>
    <div class="keyboard__row">
      <div class="keyboard__keys">
        <span class="key"><p class="key__letter">A</p></span>
        <span class="key"><p class="key__letter">S</p></span>
        <span class="key"><p class="key__letter">D</p></span>
        <span class="key"><p class="key__letter">F</p></span>
        <span class="key"><p class="key__letter">G</p></span>
        <span class="key"><p class="key__letter">H</p></span>
        <span class="key"><p class="key__letter">J</p></span>
        <span class="key"><p class="key__letter">K</p></span>
        <span class="key"><p class="key__letter">L</p></span>
      </div>
    </div>
    <div class="keyboard__row">
      <div class="keyboard__keys">
         <span class="key"><p class="key__letter">Z</p></span>
        <span class="key"><p class="key__letter">X</p></span>
        <span class="key"><p class="key__letter">C</p></span>
        <span class="key"><p class="key__letter">V</p></span>
        <span class="key"><p class="key__letter">B</p></span>
        <span class="key"><p class="key__letter">N</p></span>
        <span class="key"><p class="key__letter">M</p></span>
      </div>
    </div>
  <div class="keyboard__row">
    <div class="keyboard__keys">
      <span class="key key__space"><p class="key__letter">空格</p></span>
    </div>
  </div>
</div>
  </div>
</div>

相关推荐

发表评论

相关文章