网页设计，如何制作在点击按钮显示隐藏div一个按钮之后，才在一个div框中显示文字图片

来源：蜘蛛抓取(WebSpider) 时间：2016-11-22 10:26 标签： js点击按钮切换div
本帖子已过去太久远了，不再提供回复功能。在可编辑div中插入文字或图片解决思路与实现步骤
作者：佚名
字体：[ ] 来源：互联网 时间：12-13 11:35:04
在可编辑div中插入文字或者图片,因为web在线编辑器我从来只是用，基本不会去研究源代码,需要的朋友可以参考下
最近在网上碰到一个人问了我一个问题，在可编辑div中插入文字或者图片。因为web在线编辑器我从来只是用，基本不会去研究源代码。后来正好一个在线聊天web项目中也要用到这个功能，我就特地看看了代码。 基本上编辑器或者在线聊天web页面，是不太可能用textarea在做输入框的，因为我们可能要插入图片或者超级链接，因此选择在iframe或者div作为输入框是必须的。 我这里用的是 div. 要使div可编辑 必须 加入 contentEditable=&true& 这个属性。 然后就是获取光标位置(或者选择文字位置)进行文字或者html的插入 。 由于火狐等标准浏览器支持getSelection方法，IE9以上也支持，但是万恶的iE6-8不支持，因此要分两部分代码来写。由于这些代码很简单，以下先贴一遍 代码如下: function insertHTML(html) { var dthis=$("#div3")[0];//要插入内容的某个div,在标准浏览器中 无需这句话 var sel, if (window.getSelection) { // IE9 and non-IE sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0); range.deleteContents(); var el = document.createElement('div'); el.innerHTML = var frag = document.createDocumentFragment(), node, lastN while ( (node = el.firstChild) ) { lastNode = frag.appendChild(node); } range.insertNode(frag); if (lastNode) { range = range.cloneRange(); range.setStartAfter(lastNode); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); } } } else if (document.selection && document.selection.type !='Control') { $(dthis).focus(); //在非标准浏览器中 要先让你需要插入html的div 获得焦点 ierange= document.selection.createRange();//获取光标位置 ierange.pasteHTML(html); //在光标位置插入html 如果只是插入text 则就是fus.text="..." $(dthis).focus(); } } 以上代码基本 完成了 在可编辑div中 插入指定的html内容，这些代码在baidu或者google中到处可以搜到，因此不再解释为什么这么写（太普遍了) 执行后 会发现在IE或者非标准浏览器中 是正常的。在火狐或者chrome中 就不正常了 譬如 以下页面 ,我有 不定数量的div(可能是程序动态生成),我只需要其中某一个div进行html的插入，其他不需要。 代码如下: .....其他html元素..... &div id="div1" contentEditable="true" &&/div& &div id="div2" contentEditable="true" &&/div& &div contentEditable="true" id="div3"&&/div& &input type="button" id="cmdInsert" onclick="执行向div3插入html方法"/& &PRE class=html name="code"&.....其他html元素.....&/PRE& &P&&/P& &PRE&&/PRE&
&如上页面 我只需要div3 支持插入html 其他两个 只是可编辑而已。 &P&&/P& &P&使用上述代码会发现，如果最后一个失去焦点的是 div3 那么一切正常 如果 不是div3 或者 我又点到页面其他控件或者空白处，会发现插入的html没有插入到我们想要的div3中而是插入到了 其他地方。&/P& &P&&& 这其实不是bug,而是正常现象，getSelection 可以横跨很多域，因此无法保证 获得出来的range一定是你需要的div &/P& &P&&这里我再次申明，我实在不想看(哪怕看一眼)国内的在线web编辑器是如何实现的。经过我翻查了度娘和google发现有个思路可以解决。&/P& &P& &/P& &P&& 其实我们要解决的就是一件事情，每当页面上的元素(包括div或者任意元素) 获得焦点又失去后，我们只需获得最后一个失去焦点的div是否是div3,如果是则执行上述代码，如果不是直接在div3的内容后面加入要插入的html（硬编码就可以。不要告诉我 不会）&/P& &P&&&&& 一开始我想到的办法是对div3设置一个click事件以及focus事件，当鼠标点进去或者获得焦点时 把一个变量 譬如叫做isdiv3 设置为true,点其他地方设置为false（这个方法实际上是行不通的，这里我就不多解释为什么行不通，有各种不同的情形可以导致即使获得焦点，isdiv3依然不会被设置为true,而且需要对每个html元素设置事件让isdiv3变为false,这是很恐怖的事情）.&/P& &P& &/P& &P&& 这里我放出一种比较通用和不容易被干扰的解决办法。&/P& &P&&首先在 页面的 最顶部写上&/P& &P&&&style&&/P& &P&&div:focus{z-index:100;}& // 这里随意你设置多少值，100只是举个列子 &/P& &P&&/style&&/P& &P&上面这个样式告诉我们，当只有div 获得焦点后 他会产生一个css属性就是 z-index被设置成了100，以任何形式失去焦点 这个css属性就没了。当然你也可以设置其他的css属性。因为我们在点button执行函数的时候，div3也会失去焦点（getSelection 依然存在）&/P& &P& &/P& &P&以下思路就清晰了 我们再写一个函数&/P& &P&&PRE class=javascript name="code" sizcache="0" sizset="5"&var lastFocusID=""; function getFocus() { var divlist = document.getElementsByTagName('div'); for(var i=0; i&divlist. i++) { var ta = divlist.item(i); if (window.getComputedStyle(ta, null).zIndex!=null && window.getComputedStyle(ta, null).zIndex == 100) { if(ta.id && ta.id!=null) lastFocusID=ta.id.toString(); else lastFocusID="";
} else lastFocusID=""; } } //再加入一个全屏事件 &PRE class=javascript name="code"& $(window).click(function(e) { if (window.getSelection) { var getevent=e.srcElement?e.srcElement:e.//不要告诉我不知道这句的意思 if(getevent.tagName=="INPUT" && getevent.id!=null && getevent.id=="cmdInsert") { //代表 点了插入html的按钮 //则不执行getFocus方法 &} else getFocus();//除非点了那个插入html的按钮 其他时候必须要执行getFocus来更新最后失去焦点的div } })&/PRE&
&P&&/P& &PRE&&/PRE&
& 然后修改一下 insertHTML 这个方法 &PRE class=javascript name="code" sizcache="0" sizset="8"& function insertHTML(html) { var dthis=$("#div3")[0]; var sel, if (window.getSelection) { if(lastFocusID!="div3") { &PRE class=javascript name="code"& $("#div3).html(dthis.innerHTML+html) ;//说明 用户可能在其他控件上 进行焦点或者其他操作 则&/PRE&//后面不执行了 }
。。。。。。。。。。//其他代码照旧 &PRE&&/PRE&
&&& 这样就解决火狐或者chrome里面 会出现乱插入内容的现象。 &P&&/P& &P& &/P& &P&&& 当然这只是一个思路， 欢迎大家提供更好的办法和性能更高的思路。 &/P& &P& &/P& &/PRE&&/PRE&
大家感兴趣的内容
12345678910
最近更新的内容网页设计作业1答案_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
网页设计作业1答案
上传于||文档简介
&&网页设计作业1答案
阅读已结束，如果下载本文需要使用1下载券
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩2页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢

我要回帖

更多关于 js点击按钮切换div 的文章

 

随机推荐