qq_40546672 2021-07-10 13:24 采纳率: 33.3%
浏览 145
已采纳

怎么在input标签输入东西,点击按钮显示在页面

http://loc.dingtalk.com/78fd628416239364d0cafb94c41dadf29a6e0f7b16dd7abbec4ab66cc95e8073QzpcVXNlcnNcSFBcQXBwRGF0YVxSb2FtaW5nXERpbmdUYWxrXDg5MzIzMDY3NF92MlxJbWFnZUZpbGVzXDE2MjU5MjMxNDYyMjFfQzE0RDA2MUExOEVDN0QzNjEwQkJCQ0VGMEVBQzREQUUuanBn?renderHeight=1920&renderOrientation=1&renderWidth=1440

这是个网页,上面有个input的标签,在标签里面可以输入东西,然后旁边有一个保存,然后你这个时候往那个input标签里面,比如说打ABC123,然后你点击那个保存按钮,它就会刷新这个页面变成ABC123,然后那个按钮变成了编辑,然后那个方框就没了,只出现刚刚输入的东西。只剩下那个ABC123就前面你输的那个数字,在那边还有个编写按钮,然后你再点编写按钮又返回到那个页面了。页面是刷新不是又写了一个html

源 码 帮助_**
附上自己写的html

<title>Document</title>
  • <input id="txt" name="" /> <button id="btn" type="button">保存</button>
    <script type="text/javascript">
       document.getElementById("btn").onclick=function(){
           var txtx = document.getElementById("txt").value;
           if(txtx.trim() == ''){
               alert('你没有输入');
               return false;
           }
           var li = document.createElement("li");
           box.insertBefore(li, box.firstChild);
           li.innerHTML="<li>"+txtx+"<a href='#' id='a'> <a/>"+"</shd>";
           document.getElementById("txt").value='';
           document.getElementById("a").onclick = function(){
               box.removeChild(li);
           }
           txt.style.display="none";
       }
   </script>
  • 写回答

2条回答 默认 最新

  • CSDN专家-showbo 2021-07-10 13:34
    关注

    网页打不开,不知道这个是不是你要的效果,和你的描述一样。有帮助请点个采纳【本回答右上角】,谢谢~

    效果如下

    img

    
    <input type="text" id="txt" /><span id="spTxt" style="display:none"></span><input type="button" id="btn" value="保存" />
    <script type="text/javascript">
        document.getElementById("btn").onclick = function () {
            var txtx = document.getElementById("txt").value;
            var spTxt = document.getElementById('spTxt');
            if (this.value == '保存') {
                if (txtx.trim() == '') {
                    alert('你没有输入');
                    return false;
                }
                spTxt.innerHTML = txtx;
    
                txt.style.display = "none";
                spTxt.style.display = '';
                this.value='编辑'
            }
            else {
                txt.value = spTxt.innerHTML;
    
                txt.style.display = "";
                spTxt.style.display = 'none'
                this.value = '保存'
            }
        }
    </script>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)
编辑
预览

报告相同问题?

问题事件

  • 已采纳回答 7月12日
  • 创建了问题 7月10日

悬赏问题

  • ¥15 ceph的对象、块、文件相关问题求解答
  • ¥50 如果使用python进行ERA5 10米风场预报检验
  • ¥15 navicat解析mysql密码
  • ¥15 SDAPI(关键词-table)
  • ¥15 unity安卓打包出现问题
  • ¥15 爱快路由器端口更改错误导致无法访问
  • ¥20 安装catkin时遇到了如下问题请问该如何解决呢
  • ¥15 VAE模型如何输出结果
  • ¥15 编译python程序为pyd文件报错:{"source code string cannot contain null bytes"
  • ¥20 关于#r语言#的问题:广义加行模型拟合曲线后如何求拐点
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部