JS监听中文输入

当时是在做 Wes Bosjavascript30的一个 挑战。 在做第六个项目(根据输入框实时调用AJAX古诗匹配)时,当我们输入中文拼音,还在拼音字符状态未选择成中文时,一直在执行我编写的事件监听处理函数(当输入框里的值有变化时执行此函数, 调用AJAX在页面显示数据里包含这些字的古诗)。 而我想要的是在我们输入拼音未完成中文选择时,不让其执行我们的监听处理函数, 只有选择完中文后才去执行调用AJAX判断有没有包含输入的这些字的古诗。

古诗匹配项目效果图如下:

此问题解决方法如下:

<!--HTML代码片段-->
<input type="text" id="this_input" placeholder="中文输入未完成时不执行事件" />  
<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>  
<script type="text/javascript">  
        $('#this_input').on('input propertychange', function () {//input propertychange 当输入框里的值有变化时执行此函数  
            if ($(this).prop('cnStart')) return;//如果正在执行中文输入时,此值为true,执行return=>下面代码不执行  
            console.log('当前输入:' + $(this).val());  
            //此处执行AJAX请求判断请求的数据中有没有包含输入的这些字的古诗  
            //如果有,就将所有包含这些字的诗排列出来  
        }).on('compositionstart', function () {//compositionstart 当输入框有非直接的文字输入时触发(如:输入拼音在待选状态时)  
            $(this).prop('cnStart', true);  
            console.log('正在中文输入');//将 cnStart 变为 true,此处执行完后会跳到  
        }).on('compositionend', function () {//compositionend 当输入框有直接的文字输入时触发(如:输入拼音后完成了中文选择时)  
            $(this).prop('cnStart', false);  
            console.log('完成中文输入');  
        });  
</script>

当我们开始进行input的输入改变了input框里的值时,js会监听到input propertychange事件, 执行判断(一开始时$(this).prop('cnStart')的值我们没有定义,为undefined, 在监听了compositionstart和compositionend事件后会相应变为true和false,非true时不会进行return), 再输出文本,接下来此时会执行此函数中其它的一些操作(AJAX请求...)。

而当我们输入框输入的文字还在待选状态时(如:输入拼音未选择完成时),便会触发compositionstart事件, 此时我们通过jquery的prop()方法给这个input元素添加自定义属性(cnStart:自定义名称,表示中文输入开始)和值(true),执行输出语句。 此时执行完compositionstart事件后,因为输入框内文字有发生变化,会再去调用上面的input propertychange事件=>进行判断, 此时$(this).prop('cnStart')的值为true,会执行return语句,因此便会截断下面的所有操作,使其不会去执行。

而当我们输入框输入的文字不在待选状态后(如:输入拼音后完成了中文选择时),便会触发compositionend事件, 此时我们再将cnStart这个自定义属性设置为false,代表我们已经完成了中文输入,执行输出语句。此时执行完了compositionend事件, 同上会再去调用input propertychange事件=>进行判断,此时$(this).prop('cnStart')的值为false,不会执行return语句,那么接下来才会顺利执行我们此函数中的一系列操作。


END

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端资源

创建发送异步通讯对象Ajax请求、数据回调及属性状态说明

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

7610
来自专栏好好学java的技术栈

Java 精美思维导图

在学习的过程中画了几份脑图,都是我认认真真画的,现在放出来给大家参考一下。脑图很有利于我们整理知识点,一张图就可以把知识点全部概括了,有兴趣的同学也可以去画画。...

8010
来自专栏前端之旅

AJAX 与跨域通信(一):AJAX 与同源策略

在远古时代,如果浏览器需要从服务器请求资源,其交互模式为 “客户端发出请求 -> 服务端接收请求并返回相应 HTML 文档 -> 页面刷新,客户端加载新的 HT...

4610
来自专栏前端之旅

AJAX 与跨域通信(三):跨域解决方案

承接上文,继续补充跨域方案:postMessage、location.hash、WebSocket、Nginx 反向代理、Nodejs 中间件代理。

6740
来自专栏Java技术栈

缓存竟也能导致跨域问题?

由于页面设计需要,页面展示图片,并可点击下载按钮进行下载(需要前端打包多个图片,所以需要使用ajax请求图片获得二进制内容,不能直接使用img或a进行下载),如...

14610
来自专栏学院君的专栏

Go 语言网络编程系列(六)—— RPC 编程篇:服务端与客户端 RPC 调用实现

关于 HTTP 编程我们先简单介绍到这里,后面介绍 Web 编程时还会详细展开。今天,我们来简单介绍下 Go 语言的 RPC 编程,这在微服务开发中很有用。

8930
来自专栏前端之旅

AJAX 与跨域通信(二):跨域解决方案

本篇讲解常见的几种跨域方案:JSONP、CORS、图像Ping、document.domain、window.name。

5710
来自专栏前端资源

一个兼容get请求和post请求的Ajax封装函数

今天在看某风网老师录制的 Ajax 函数封装的视频,get 和 post 请求都考虑到了,我在这里也做一下笔记。

9910
来自专栏小勇DW3

传统同步阻塞和异步非阻塞的区别理解

同步与异步的理解 同步与异步的重点在消息通知的方式上,也就是调用结果通知的方式。 同步:当一个同步调用发出去后,调用者要一直等待调用结果的通知后,才能进行后续...

8210
来自专栏前端之旅

AJAX 与跨域通信(一):AJAX

在远古时代,如果浏览器需要从服务器请求资源,其交互模式为 “客户端发出请求 -> 服务端接收请求并返回相应 HTML 文档 -> 页面刷新,客户端加载新的 HT...

5620

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励