js监听中文拼音输入开始输入和输入完成的事件，用input事件用拼音输入法的大坑，由这两个事件来解决

最新推荐文章于 2024-03-23 09:32:20 发布

shenzhipeng1023

最新推荐文章于 2024-03-23 09:32:20 发布

阅读量5.9k

点赞数

文章标签： js监听拼音输入 h5监听拼音输入 compositionstart和compositionen

本文链接：https://blog.csdn.net/jason_renyu/article/details/103136491

版权

要监听输入框的输入，首先想到的是oninput事件，对与这些在遇到拼音输入法时总是很头疼，因为拼音输入法会先把拼音放入输入框，这是也会触发事件带来不少困扰，这里就推荐两个h5的新事件来解决这个烦恼，这个就是compositionstart（中文拼音输入法开始输入时监听）和compositionend（中文拼音输入法输入完成时监听）减少不少的烦恼，下边一个实例一起来看下这两个事件的魅力吧！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.inputs {
				width: 600px;
				height: 60px;
				margin: 20px;
				font-size: 24px;
				color: #000000;
			}
			.inputs::-webkit-input-placeholder {
				color: #42B983;
			}
		</style>
	</head>
	<body>
		<input type="text" id="inputs" placeholder="请输入内容"  class="inputs">
	</body>
	<!-- 
	为了方便展示这里用jQuery众所熟知的技术，
	这个为cdn的方便查看，可以换成之际jq文件 
	-->
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		let val = $('#inputs').val()
		$('#inputs')
		.on('input',event => {
			console.log('这是input事件', val)
		})
		.on('compositionstart',event => {
			// 中文输入法开始输入
			console.log('这是compositionstart事件', val)
		})
		.on('compositionend',event => {
			// 中文输入法结束输入
			console.log('这是compositionend事件', val)
		})
	</script>
</html>

shenzhipeng1023

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
js监听中文拼音输入开始输入和输入完成的事件，用input事件用拼音输入法的大坑，由这两个事件来解决

要监听输入框的输入，首先想到的是oninput事件，对与这些在遇到拼音输入法时总是很头疼，因为拼音输入法会先把拼音放入输入框，这是也会触发事件带来不少困扰，这里就推荐两个h5的新事件来解决这个烦恼，这个就是compositionstart（中文拼音输入法开始输入时监听）和compositionend（中文拼音输入法输入完成时监听）减少不少的烦恼，下边一个实例一起来看下这两个事件的魅力吧！&l...
复制链接

扫一扫