http://loc.dingtalk.com/78fd628416239364d0cafb94c41dadf29a6e0f7b16dd7abbec4ab66cc95e8073QzpcVXNlcnNcSFBcQXBwRGF0YVxSb2FtaW5nXERpbmdUYWxrXDg5MzIzMDY3NF92MlxJbWFnZUZpbGVzXDE2MjU5MjMxNDYyMjFfQzE0RDA2MUExOEVDN0QzNjEwQkJCQ0VGMEVBQzREQUUuanBn?renderHeight=1920&renderOrientation=1&renderWidth=1440
这是个网页,上面有个input的标签,在标签里面可以输入东西,然后旁边有一个保存,然后你这个时候往那个input标签里面,比如说打ABC123,然后你点击那个保存按钮,它就会刷新这个页面变成ABC123,然后那个按钮变成了编辑,然后那个方框就没了,只出现刚刚输入的东西。只剩下那个ABC123就前面你输的那个数字,在那边还有个编写按钮,然后你再点编写按钮又返回到那个页面了。页面是刷新不是又写了一个html
源 码 帮助_**
附上自己写的html
<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>
网页打不开,不知道这个是不是你要的效果,和你的描述一样。有帮助请点个采纳【本回答右上角】,谢谢~
效果如下
<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>
你题目的解答代码如下:(如有帮助,望采纳!谢谢! 点击我这个回答右上方的【采纳】按钮)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
</head>
<body>
<input type="text" id="txt" value="" />
<span id="content" style="display: none;"></span>
<input type="button" id="btn" value="保存" />
<input type="button" id="btn2" value="编辑" style="display: none;"/>
<script type="text/javascript">
document.getElementById("btn").onclick=function(){
var txt = document.getElementById("txt");
var content = document.getElementById("content");
if(txt.value.trim() == ''){
alert('你没有输入');
return false;
}
content.innerText = txt.value;
txt.style.display="none";
content.style.display="";
document.getElementById("btn").style.display="none";
document.getElementById("btn2").style.display="";
}
document.getElementById("btn2").onclick=function(){
txt.style.display="";
content.style.display="none";
document.getElementById("btn").style.display="";
document.getElementById("btn2").style.display="none";
}
</script>
</body>
</html>