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

Web程序数据库 Web程序数据库 主题:1214 回复:2505

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

夜无邪 发布于 2016-10-18 字数 646 浏览 912 回复 1

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

<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>

请输入图片描述

请输入图片描述

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(1

泛泛之交 2017-02-09 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>

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