开发者社区> 问答> 正文

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

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

展开
收起
小旋风柴进 2016-03-20 10:48:42 8372 0
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>
    2019-07-17 19:08:58
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
JavaScript面向对象的程序设计 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载