网站必须天天更新吗,微信网站对接,h5响应式网站制作,四川省建设监理协会官方网站1、演示 解决前 解决后 2、输入框事件介绍 compositionstart事件在用户开始使用输入法输入时触发。这意味着用户正在进行组合输入#xff0c;比如在中文输入法中#xff0c;用户可能正在输入一个多个字符的词语。在这个阶段#xff0c;输入框的内容可能还没有完全确定#…1、演示 解决前 解决后 2、输入框事件介绍 compositionstart事件在用户开始使用输入法输入时触发。这意味着用户正在进行组合输入比如在中文输入法中用户可能正在输入一个多个字符的词语。在这个阶段输入框的内容可能还没有完全确定因为用户可能在继续输入中。这个事件通常用于在输入法输入过程中进行一些特定的操作或者提供反馈。 compositionend事件在用户完成使用输入法输入时触发。这表示用户已经完成了组合输入输入框的内容已经确定。在这个事件触发后可以认为输入框中的内容是最终确定的。这个事件通常用于在输入法输入结束后执行一些操作比如验证输入、提交表单等。 3、解决后的代码 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbodyinput typetext //bodyscript// 获取文档中的input元素const ipt document.querySelector(input)// 定义一个搜索函数用于输出搜索关键字到控制台function search() {console.log(搜索关键字:, ipt.value)}// 初始化一个变量用于跟踪输入是否在输入法组合状态中let isComposition true// 监听input元素的input事件ipt.addEventListener(input, function () {// 在非输入法组合状态下触发搜索函数if (isComposition) {search()}})// 监听input元素的compositionstart事件表示输入法开始组合文本ipt.addEventListener(compositionstart, function () {// 将isComposition标志设置为false表示当前处于输入法组合状态isComposition false})// 监听input元素的compositionend事件表示输入法结束组合文本ipt.addEventListener(compositionend, function () {// 将isComposition标志设置为true表示输入法组合状态结束// 然后触发搜索函数因为输入法组合状态结束输入文本已确认isComposition truesearch()})/script
/html4、代码解析 获取页面中的 input 元素并将其存储在变量 ipt 中。定义了一个名为 search 的函数该函数用于在控制台输出 input 元素当前的值即搜索关键字。初始化了一个名为 isComposition 的布尔变量用于跟踪输入是否在输入法组合状态中。通过监听 input 元素的 input 事件当用户输入文本时根据 isComposition 的状态来触发搜索函数。只有在非输入法组合状态下即 isComposition 为 true才会触发搜索函数 search()。监听 input 元素的 compositionstart 事件当输入法开始组合文本时将 isComposition 设置为 false表示当前处于输入法组合状态。监听 input 元素的 compositionend 事件当输入法结束组合文本时将 isComposition 设置为 true表示输入法组合状态结束并立即触发搜索函数 search()以输出最终确认的输入文本。 这段代码可以确保在用户输入时能够正确处理输入法组合状态下的文本并在确认输入后触发搜索操作。
