首页 > 其他分享 >js原生方法:获取某个元素所处屏幕的位置,input输入框中文输入时的调用

js原生方法:获取某个元素所处屏幕的位置,input输入框中文输入时的调用

时间:2023-06-29 17:34:24浏览次数:54  
标签:inputSearch js 输入框 拼音输入 addEventListener input true

span.getBoundingClientRect() 会返回改元素的位置信息

// 输入框内容改变
function inputSearchChange () {
  // 如果是拼音输入,则会进入这个监听
  inputSearch.addEventListener('compositionstart', () => {
    lastInputValue = inputSearch.value
    isPinyin = true
  })
  inputSearch.addEventListener('input', () => {
    // 如果不是拼音输入就调用请求
    if (!isPinyin) {
      pageNo = 1
      isNextPage = true
      clearTimeout(timeout)
      timeout = setTimeout(getSearchInfo, 500)
    }
    clearIconShow()
  })
  // 拼音输入结束就会进入这个监听
  inputSearch.addEventListener('compositionend', () => {
    isPinyin = false
    // 如果中文输入完成有变化,则处理该值
    if (inputSearch.value !== lastInputValue) {
      pageNo = 1
      isNextPage = true
      getSearchInfo()
    }
  })
}

标签:inputSearch,js,输入框,拼音输入,addEventListener,input,true
From: https://www.cnblogs.com/wang--chao/p/17514740.html

相关文章

  • JSTL-foreach
     <%@taglibprefix="c"uri="http://java.sun.com/jsp/jstl/core"%><%@pagecontentType="text/html;charset=UTF-8"language="java"%><!DOCTYPEhtml><htmllang="en"><head>......
  • js小练习
    写一个函数,计算两个数字的和functionadd(a,b){console.log(a+b)}add(2,3)判断一个数字是否是偶数functionouShu(a){if(a%2===0){console.log(a+'是偶数')}else{console.log(a+'是奇数')}}ouShu(155)找出一个数组中的最大值并......
  • js随笔
    JavaScript(缩写:JS)是一门完备的动态编程语言。当应用于HTML文档时,可为网站提供动态交互特性。由布兰登·艾克(BrendanEich,Mozilla项目、Mozilla基金会和Mozilla公司的联合创始人)发明。JavaScript的应用场合极其广泛,简单到幻灯片、照片库、浮动布局和响应按钮点击,复杂到游戏......
  • C# 序列化大小写 序列化对象为大小写 JsonConvert.SerializeObject
    关于C#序列化Json对象框架:.Net插件:Newtonsoft.Json最近有人问我序列化对象还区分大小写?我当时心想我都是通过Bejson格式化然后转换为C#类然后直接复制。没有关心过序列化成什么大小写。因为这样的话可以保持一致。直到有人问我才自己研究了一下。如下:usingNewtonsoft.......
  • JSTL-if
      <%--CreatedbyIntelliJIDEA.User:adminDate:2023/6/29Time:16:29TochangethistemplateuseFile|Settings|FileTemplates.--%><%@pagecontentType="text/html;charset=UTF-8"language="java"%><......
  • JSP-脚本-案例
     <%@pageimport="com.itheima.pojo.Brand"%><%@pageimport="java.util.ArrayList"%><%@pageimport="java.util.List"%><%--CreatedbyIntelliJIDEA.User:adminDate:2023/6/29Time:15:31......
  • 带有 Spring Boot 后端的 Vue.js 前端
    概述在开始本教程中,先推荐1个SpringBoot+Vue前后端分离Java项目,本项目是一个大型互联网金融项目,采用SpringBoot,Dubbo微服务的架构,包括多个独立的微服务,micr-common个公共服务,micr-web服务,micr-database数据库服务,micr-pay支付服务,micr-task定时任务。前端技术栈:Vue,Java......
  • json.NewEncoder的用法
    写get或post的api接口时需要注意什么?在编写GET或POST的API接口时,有一些注意事项需要考虑,以确保接口的正确性和安全性:路由和路径参数:在设计API接口时,需要选择合适的路由和路径参数来表示资源的唯一标识符或其他参数。确保路径参数的命名清晰明确,遵循RESTful设计原则。请求方......
  • firefox threejs 显示异常排查处理
    firefox版本:114.0.2threejs:0.135.0异常描述火狐浏览器下threejs3D页面展示的CSS3DSprite中的有borderborder-radius的div边框显示异常显示情况如下正常情况下的显示是这样的:<div></div>div{ position:fixed; cursor:default; width:auto!importan......
  • Vue.js项目在IE11白屏报错
    一、概述项目使用vue/cli4脚手架搭建的前端项目,vue版本为2.6.10。但开发环境的IE11打开显示白屏,F12打开显示:查明报错原因是:I.E.不支持ES6语法。二、解决方案(一)解决方案11、安装如下的依赖包:npminstall--save-devbabel-polyfill或npminstall--save@babel-polyfill2、mai......