Update after change

最新推荐文章于 2022-07-01 09:03:04 发布

三妞

最新推荐文章于 2022-07-01 09:03:04 发布

阅读量295

点赞数 1

分类专栏： js HTML tags

js 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

HTML tags

1 篇文章 0 订阅

订阅专栏

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>