<!DOCTYPE html>
<html>
<body>
<input type="text">
<div id="show"></div>
</body>
<script>
(function() {
var data = {
word: 'im word'
}
function defienReactive(data, key, value) {
Object.defineProperty(data, key, {
get: function() {
return value // 这里要用闭包哈，要不然直接return data[key]会一直反复调用get，导致栈溢出。
},
set: function(newVal) {
if (newVal != value) {
value = newVal
document.querySelector('#show').textContent = newVal
}
}
})
}
defienReactive(data, 'word', data['word'])
function changeView(e) {
console.log('input')
data['word'] = e.target.value
}
var inputNode = document.querySelector('input')
inputNode.addEventListener('input', debounce(changeView, 500))
// 下面完成input中处理防抖和中文的处理
// 对于input进行防抖，处理中文输入有几个方法
// compositionstart:输入法开始输入，阻止input事件
// conpositionupdate:输入法更新
// compositionend：输入法结束。调用input
function debounce(fn, delay) {
var prev = 0
var timer = null
return function(e) {
if (e.target.composing) {
return // 如果正在输入法过程中，直接返回不触发。
}
var now = +new Date()
var that = this
var args = Array.prototype.slice.call(arguments)
clearTimeout(timer)
if (delay - (now - prev) < 0) {
fn.apply(that, args)
}
else {
timer = setTimeout(function() {
fn.apply(that, args)
prev = +new Date()
}, delay)
}
prev = now
}
}
function onCompositionStart(e) {
e.target.composing = true //设置当前状态为正在输入法输入
}
function onCompositionEnd(e) {
e.target.composing = false // 撤销当前状态
var event = document.createEvent('HTMLEvents')
event.initEvent('input')
e.target.dispatchEvent(event)
}
inputNode.addEventListener('compositionstart', onCompositionStart)
inputNode.addEventListener('compositionend', onCompositionEnd)
})()
</script>
</html>
记录学习前端中做的记录，js基础，html，css，vue，常见实现等.zip
需积分: 1 47 浏览量
2024-03-13
22:45:06
上传
评论 1
收藏 2.42MB ZIP 举报
记录学习前端中做的记录，js基础，html，css，vue，常见实现等.zip （255个子文件） 
main.css 582B main.css 304B .gitignore 54B
双绑input并处理中文.html 2KB 节流.html 2KB 输入框布局.html 2KB 圣杯布局.html 2KB 防抖.html 1KB main.html 1KB 圣杯布局.html 1KB css箭头.html 1KB main.html 1KB 双飞翼.html 938B easy.html 927B 单行.html 737B RAF.html 665B 圣杯-position.html 645B 圣杯-calc.html 613B 圣杯flex.html 531B main.html 510B animate.html 476B main.html 440B test.html 432B main.html 427B position.html 426B setInterval.html 416B float.html 416B float2.html 414B auto.html 390B css三角.html 390B css曲线.html 387B margin.html 363B flex.html 361B transform.html 361B main.html 352B flex.html 342B grid.html 339B base.html 330B css扇形.html 301B css梯形.html 285B 外边距重叠.html 277B main.html 277B basic.html 271B main.html 271B test.html 254B main.html 166B
placeHolder.jpg 487KB img.jpg 51KB main.js 6KB observer.js 2KB main.js 2KB main.js 2KB dialog.js 2KB 并发控制.js 2KB main.js 2KB async.js 1KB main.js 1KB main.js 1KB main.js 1KB test.js 1KB promise.all.js 1KB 发布订阅.js 1KB main.js 1KB complete.js 1KB main.js 1018B bind.js 1015B Observer.js 998B main.js 978B main.js 873B main.js 841B main.js 788B main.js 767B Watcher.js 716B bind.js 706B compose.js 685B main.js 666B promise.race.js 647B main.js 640B usePromise.js 631B main.js 604B promise.any.js 602B all.js 572B main2.js 555B promise.settimeout.js 546B main.js 542B main.js 521B 展开语法.js 520B getter.js 475B main.js 461B apply.js 454B call_apply.js 447B instanceof.js 439B main.js 419B main2.js 415B dfs.js 413B main.js 410B 剩余参数.js 379B example1.js 376B Dep.js 352B Map.js 336B共 255 条
- 1
- 2
- 3
资源评论
龙年行大运
- 粉丝: 1009
- 资源: 3847
