CSS3-添加标题 点击确定后就显示 标题

Question

在输入框输入标题点击确定按钮后就显示标题，左边按钮变成修改
，我要无刷新显示，求教

<div class="tit">
<p>
<input type="text" name="title" id="title" class="txt" value="输入该视频的标题" onfocus="OnFocusFun(this,'输入该视频的标题')" onblur="OnBlurFun(this,'输入该视频的标题')"/>
<a href="javascript:;" rel="#" class="btn" >确定</a> </p>
</div>

Answer 1

<meta charset="utf-8">
<style>
.tit {position: relative;width:200px;}
.lab {position: absolute;top:0;left:0;display:none;width:200px;}
.btn {position: absolute;left:200px;width:50px;}
</style>
<div class="tit">
<input type="text" class="inp" placeholder="输入该视频的标题">
<label class="lab">输入该视频的标题</label>
<a href="javascript:void(0)" class="btn">确定</a>
</div>
<script type="text/javascript">
var oinput = document.getElementsByTagName("input")[0]
var olab = document.getElementsByTagName("label")[0]
var oA= document.getElementsByTagName("a")[0]
oflag = true

oA.onclick = function(){
if(oflag){
olab.innerHTML = oinput.value
olab.style.display = "block"
oinput.style.display = "none"
oA.innerHTML="修改"
oflag= false;
}
else if (!oflag){
olab.style.display = "none"
oinput.style.display = "block"
oflag= true;
oA.innerHTML="确认"
oflag = true
}
}
</script>

样式没有好好弄，你自己弄弄应该没有问题。