input 框定时更换 placeholder 文案_ant-input+修改placeholde-优快云博客

本文链接：https://blog.youkuaiyun.com/wbandzlhgod/article/details/143715241

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>定时更换内容</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>

  <div id="content">
    这是初始内容。
  </div>
  <div>
    <input type="text" placeholder="默认提示文案" id="inputId">
  </div>
  <button id="start">开始</button>
  <button id="pause">暂停</button>

  <script>
    $(document).ready(function () {
      var messages = ["例：贴片电阻", "例：HS10 R05J", "例：备选电阻啊"];
      var index = 0;
      var timer;
      /**
       * 定时切换文案
       */
      function startSwitch() {
        if (timer === undefined) {
          timer = setInterval(function () {
            //文本内容
            $('#content').fadeOut(function () {
              $(this).text(messages[index]).fadeIn();
            });
            //input 内容
            $('#inputId').fadeIn(function () {
              $(this).attr('placeholder', messages[index]).fadeIn();
            })

            index = (index + 1) % messages.length;
          }, 2000); // 每2秒更换一次内容
        }
      }
      /**
       * 暂停切换文案
       */
      function blurSwitch() {
        clearInterval(timer);
        timer = undefined;
      }

      $('#start').click(function () {
        startSwitch();
      });

      $('#pause').click(function () {
        blurSwitch()
      });
      startSwitch();
      //input 获取焦点事件
      $('#inputId').focusin(function () {
        console.log('---------')
        blurSwitch()
        $(this).attr('placeholder', "默认提示文案").fadeIn();
      }).blur(function () {
        console.log('eeeeeeee')
        startSwitch();
      })
    });
  </script>

</body>

</html>