您的位置：首页 > 其它

Update after change

2016-06-02 14:34 309 查看

Update after change

实现功能

点击之后文字转变为可编辑状态

编辑之后保持

Now here is the code:

<html>
<head>
<style type="text/css">
body
{
font-family: 'helvetica neue';
color:#666;
padding: 0 20%;
}

li input
{
display: none;
}

li.edit span
{
display: none;
}
li.edit input
{
display: initial;
}
</style>
</head>
<body>
<header>
<h1>Javascript Events</h1>
</header>
<main>
<ul id='checkList'>
<li>
<span>apples</span>
<input value='Apples'/>
</li>
<li>
<span>Oranges</span>
<input value='Oranges'/>
</li>
<li>
<span>Bananas</span>
<input value='Bananas'/>
</li>
</ul>
</main>
<script type="text/javascript">
var checkList= document.getElementById('checkList');
var items=checkList.querySelectorAll('li');
var inputs=checkList.querySelectorAll('input');

for(var i=0;i<items.length;i++)
{
items[i].addEventListener('click',editItem);
inputs[i].addEventListener('blur',updateItem);
// 保证按回车后会换行
inputs[i].addEventListener('keypress',itemKeyPress);
}

function editItem(){
this.className='edit';
var input=this.querySelector('input');
input.focus();
// console.log(input.focus().value)
input.setSelectionRange(0,input.value.length);
}
function updateItem()
{
this.previousElementSibling.innerHTML=this.value;
this.parentNode.className='';
}

function itemKeyPress(event)
{
if(event.which===13)
{
updateItem.call(this);
}
}
</script>
</body>
</html>

这份代码是看YouTube视频打下来的

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航