JS 点击编辑按钮，显示input边框，可编辑，点击保存按钮，输入框消失，不可编辑

Question

就类似编辑资料的，都是输入框，点击编辑可以编辑输入框内的内容，点击保存输入框消失

Answer 1

自己做个样式不显示控件input的边框就好了，默认readonly不允许编辑。点击编辑的时候加上边框样式，去掉readonly属性

 <style>.readonly input{border:none}</style>
<div id="dvInput" class="readonly">
 text1：<input type="text" readonly value="text1" /><br />
 text2：<input type="text" readonly value="text2" /><br />
</div>
<input type="button" value="编辑" onclick="btnClick(this)" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script>
    function btnClick(btn) {
        var toEdit = btn.value == '编辑';
        $('#dvInput')[toEdit ? 'removeClass' : 'addClass']('readonly').find(':input').attr('readonly', toEdit ? false : true);
        btn.value = toEdit ? '保存' : '编辑';
        if (!toEdit) {//保存的ajax代码
            //..
        }
    }
</script>