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()
}
})
}
标签:
javascript
, 前端基础
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库