网页 使用js或jQuery实现 显示的文本变成输入框以供修改

Posted 2023-05-18

最近刚开始学习网页知识，现在遇到个问题
我需要显示一个详细信息，显示的时候都是文本状态，就是不可编辑
但是点击修改按钮后，那些显示条目的部分就变成输入框，里面内容就是你的详细信息，以供修改
这个功能以前好像见过，但是百度不出来，所以这里提问下，不知道有没有高手知道的？

很简单，点击修改的时候把文本隐藏，把文本框显示，并传值进文本框，保存修改的时候，
就把文本显示，文本框隐藏，并把文本框内容赋值到文本显示！ 参考技术A

复制以下代码，望采纳：

用最简单的js效果达到最高的效果。。。。

<textarea  id="text_box" readonly="true"  style="width:400px; height:130px;">
你能直接修改以下内容吗？
试试看——O(∩_∩)O哈哈~只有点击修改按钮才可以修改哦！！！！！
</textarea>
<input type=button value="修改" onclick="document.all.text_box.readOnly=false" >

动态创建的文本框想要加上jQuery的datepicker功能变成日期选择控件该怎么办？

通常页面输入控件想得到日期选择功能，借助jQuery是这样实现的：

1.载入css和js

<script src="jqueryui/jquery-ui.js" type="text/javascript"></script>
<link rel="stylesheet" rev="stylesheet" href="jqueryui/jquery-ui.css" type="text/css" />

 

2.对控件调用datepicker()，如

$("#dateTxt").datepicker();

 

但是如果输入框是动态创建的该怎么办呢？

如下：

var inputDate=document.createElement("input");
inputDate.setAttribute("class","field size4");

inputDate.setAttribute("onfocus","$(this).datepicker();");

或是
inputDate.setAttribute("onclick","$(this).datepicker();");

就可以了。