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

span.getBoundingClientRect() 会返回该元素的位置信息
getBoundingClientRect() 是一个原生的 JavaScript DOM 方法,用于获取 HTML 元素的大小及其相对于视口(viewport)的位置。这个方法返回一个包含元素的大小及其相对于视口的位置的对象。这个返回的对象包含以下属性:

  • top: 元素上边缘距离视口上边的距离。
  • right: 元素右边缘距离视口左边的距离。
  • bottom: 元素下边缘距离视口上边的距离。
  • left: 元素左边缘距离视口左边的距离。
  • width: 元素的宽度(等同于 right - left)。
  • height: 元素的高度(等同于 bottom - top)。
// 输入框内容改变
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()
    }
  })
}
posted @ 2023-06-29 17:21  嘿!那个姑娘  阅读(168)  评论(0编辑  收藏  举报