input blur test

safari blur bug test

by hui liu

HTML

<div id="test">
  click to append
</div>
<div id="inputblur">

</div>
<div id="log">

</div>

CSS

.test2{
  display:none;
}

JavaScript

var $inputblur = $('#inputblur');
$inputblur.on('blur', 'input', function(e) {
  window.log(e.target.value + '--blur');
}).on('select','input',function(e){
 	window.log(e.target.value + '--select');
}).on('focus','input',function(e){
 	window.log(e.target.value + '--focus');
});
window.log=function (str){
	$('#log').append(str + '</br>');
}

var str ='<div class="show">sdfasdg' +
  '<input type="text" value="test1" class="name" placeholder="输入分类名称并回车" >' +
  '<input class="test2" type="text" value="test2" class="name" placeholder="输入分类名称并回车" >' +
  '</div>'
$('#test').on('click', function() {
  $inputblur.append(str);
  var $input = $inputblur.find('input');
  $input.select().focus();
});
/*
测试结果：
safari:
test1--select
test1--focus
test2--select
test1--blur
test2--focus
test2--blur
test1--focus
test1--blur
test2--focus
test2--blur

chrome:
test1--select
test1--focus
test2--select
test1--focus
test1--select
test1--select
test2--select

测试发现，如果是在chrome浏览器上，不会触发第一个input的blur事件
但是如果是safari浏览器上，会触发第一个input的blur事件
*/