Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

双向绑定ie11 input 中文placeholder 兼容问题 #495

Closed
zhangzy0930 opened this issue May 16, 2020 · 4 comments
Closed

双向绑定ie11 input 中文placeholder 兼容问题 #495

zhangzy0930 opened this issue May 16, 2020 · 4 comments

Comments

@zhangzy0930
Copy link

版本:3.8.2

 var MyApp = san.defineComponent({
        template: '<div><input value="{= name =}" placeholder="中文">Hello {{name}}!</div>',
        attached: function () {
            this.data.set('name', 'word')
        }
    });

    var myApp = new MyApp();
    myApp.attach(document.body);

ie11下 placeholder为中文的时候,会默认触发一次input事件。导致在attached中设置的name的值被清空。

  • ie8:
    image
  • IE11:
    image
@errorrik
Copy link
Contributor

我看看这个问题。但,为啥不在组件渲染前就设置好数据name?

@zhangzy0930
Copy link
Author

实际场景是子组件attached时派发一个消息,父组件处理消息时更改绑定的值。 然后发现值被清洗掉了。
image

@errorrik
Copy link
Contributor

errorrik commented May 19, 2020

写了个比较原始的测试,没发现问题,不知道是不是因为我是模拟的ie11,而不是纯粹的。代码放出来你看看,我也再去找个原始的ie11试试看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>中文</title>
</head>

<body>
<div id="a"></div>
<b id="b"></b>
<script>
function on(el, name, fn) {
  if (el.addEventListener) {
    el.addEventListener(name, fn, false);
  }
  else {
    el.attachEvent('on' + name, fn);
  }
}


var input = document.createElement('input');
document.getElementById('a').innerHTML = 'addEventListener is '
  + (input.addEventListener ? '' : 'not ') + 'supported.<br>'
  + 'oninput is '
  + (('oninput' in input) ? '' : 'not ') + 'supported.<br>'
  + 'window.CompositionEvent is '
  + (window.CompositionEvent ? '' : 'not ') + 'supported.';
input.setAttribute('type', 'text');
input.placeholder = '测试';
document.body.appendChild(input);

if ('oninput' in input) {
  on(input, 'input', function () {
    document.getElementById('b').innerHTML = (input.value) + ' inputed';
  });
}

if (window.CompositionEvent) {
  on(input, 'compositionstart', function () {
    document.getElementById('b').innerHTML ='start';
  });

  on(input, 'compositionend', function () {
    document.getElementById('b').innerHTML +='END';
  });

  on(input, 'change', function () {
    document.getElementById('b').innerHTML +='change';
  });
}
</script>
</body>
</html>

@errorrik
Copy link
Contributor

angular/angular.js#2614
vuejs/vue#7138

但实际上,上面两个issue描述都不完整。这个现象不是必发生,和

  • value与placeholder的设置顺序
  • placeholder是否全ascii字符

都有关系

我想想怎么改,目前还想不出来

errorrik added a commit that referenced this issue May 20, 2020
errorrik added a commit that referenced this issue May 20, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants