首页 > 其他分享> 文章详细

WebApi Day02 随笔

2022-07-17 19:02:41 阅读：188 来源： 互联网

标签：WebApi console log Day02 value 事件 input 随笔输入

1. 关闭广告

功能：

点击 x 就会关闭相关页面

原生js：

实际上就是隐藏了 display：none

给 x 注册事件 click xx.style.display = 'none'

2. 随机点名

功能：

开始后不断刷新名字

js实现：

1. 定义数组存放名字获取对应元素

2. 给开始按钮注册事件回调函数中开始间隔函数渲染名字数组长度 1 时就禁用按钮

3. 给结束按钮设置关闭计时器别忘记删除元素 splice

3. 焦点事件 focus blur

input.select() 更好的用户体验

  <body>
    <input type="text" value="请输入用户姓名" />
    <script>
      const input = document.querySelector('input')
      input.addEventListener('focus', function () {
        // console.log('有焦点时间触发')
        input.select() // 选中value的内容 placeholder更好
      })
      input.addEventListener('blur', function () {
        console.log('有焦点时间失去')
      })
    </script>
  </body>

4. 评论回车

功能：

1. 输入内容回车后渲染到指定位置（键盘事件如果要求 ctrl + enter 发布评论如何设计）

2. 空白内容不会显示（trim）

3. 光标在输入框时显示统计字数离开时统计字数消失

js实现：

1. 注册光标事件 focus blur style形式设置属性opacity = 0 / 1 显示 and 隐藏

2. 注册用户输入事件 input 检测输入长度 xx.value.length

3. 回车发布特殊按键 altKey ctrlKey shiftKey metaKey 为true 是按下 trim() 是去除左右的空白 if(e.key !== 'Enter') return if (! xx.value.trim()) return 代码要优雅

4. 显示输出评论的板块然后复原 xx.value = '' 回车后输入框回复初始状态

解决小瑕疵：输入中文时如：xin 新检测文字个数时先显示1 2 3 1

解决办法：

  <body>
    <!-- <button>点击</button> -->
    <input type="text" />
    <span></span>
    <script>
      const input = document.querySelector('input')

      let isChinese = false
      input.addEventListener('compositionstart', function (ev) {
        // 该事件类型与 input 类似的，都是在用户进行输入时被触发
        // 区别在于 该事件在针对中文输入时，只有文字确定后才会触发
        // console.log("文字输入了");
        // 该事件只有在输入中文时才会触发
        console.log('你正在输入的中文...')
        isChinese = true
      })

      input.addEventListener('compositionend', function (ev) {
        // 该事件类型与 input 类似的，都是在用户进行输入时被触发
        // 区别在于 该事件在针对中文输入时，只有文字确定后才会触发
        // console.log("文字输入了");
        // 该事件只有在输入中文时才会触发
        console.log('你正在输入的中文输入结束了...')
        document.querySelector('span').innerHTML = this.value.length
        isChinese = false
      })

      input.addEventListener('input', function () {
        if (isChinese) return   // 不是英文就return
        document.querySelector('span').innerHTML = this.value.length
      })
    </script>
  </body>

标签：WebApi,console,log,Day02,value,事件,input,随笔,输入
来源： https://www.cnblogs.com/zhulongxu/p/16488059.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

WebApi Day02 随笔

1. 关闭广告

功能：

2. 随机点名

功能：

js实现：

3. 焦点事件 focus blur

4. 评论回车

功能：

js实现：