在可编写div中插进文本或照片处理思路与完成流

日期:2021-03-11 类型:科技新闻 

关键词:小游戏源代码,互动小游戏微信,自制小游戏,html5游戏,制作游戏大概多少钱

近期在网络上碰到1本人问了我1个难题,在可编写div中插进文本或照片。由于web线上编写器我几乎只是用,基础不容易去科学研究源码。后来恰好1个线上闲聊web新项目中也要用到这个作用,我就特意看看了编码。

基础上编写器或线上闲聊web网页页面,是不太将会用textarea在做键入框的,由于大家将会要插进照片或非常连接,因而挑选在iframe或div做为键入框是务必的。
我这里用的是 div.

要使div可编写 务必 添加 contentEditable="true" 这个特性。
随后便是获得光标部位(或挑选文本部位)开展文本或html的插进 。
因为火狐等规范访问器适用getSelection方式,IE9以上也适用,可是万恶的iE6⑻不适用,因而要分两一部分编码来写。因为这些编码很简易,下列先贴1遍

拷贝编码
编码以下:

function insertHTML(html)
{
var dthis=$("#div3")[0];//要插进內容的某个div,在规范访问器中 不用这句话
var sel, range;
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 = html;
var frag = document.createDocumentFragment(), node, lastNode;
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(将会是程序流程动态性转化成),我只必须在其中某1个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>

&nbsp;如上网页页面 我只必须div3 适用插进html 别的两个 只是可编写罢了。

<P></P>
<P>应用上述编码会发现,假如最终1个丧失聚焦点的是 div3 那末1切一切正常 假如 并不是div3 或 我又点到网页页面别的控制或空白处,会发现插进的html沒有插进到大家要想的div3中而是插进到了 别的地区。</P>
<P>&nbsp;&nbsp; 这实际上并不是bug,而是一切正常状况,getSelection 能够横跨许多域,因而没法确保 得到出来的range1定是你必须的div

</P>
<P>&nbsp;这里我再度声明,我确实不想看(哪怕看1眼)中国的线上web编写器是怎样完成的。历经我翻查了度娘和google发现有个思路能够处理。</P>
<P>

</P>
<P>&nbsp; 实际上大家要处理的便是1件事儿,每当网页页面上的元素(包含div或随意元素) 得到聚焦点又丧失后,大家只需得到最终1个丧失聚焦点的div是不是是div3,假如是则实行上述编码,假如并不是立即在div3的內容后边添加要插进的html(硬编号便可以。不必告知我 不容易)</P>
<P>&nbsp;&nbsp;&nbsp;&nbsp; 1刚开始我想起的方法是对div3设定1个click恶性事件和focus恶性事件,当电脑鼠标点进去或得到聚焦点时 把1个自变量 例如叫做isdiv3 设定为true,点别的地区设定为false(这个方式具体上是行堵塞的,这里我就很少解释为何行堵塞,有各种各样不一样的情况能够致使即便得到聚焦点,isdiv3仍然不容易被设定为true,并且必须对每一个html元素设定恶性事件让isdiv3变成false,这是很可怕的事儿).</P>
<P>

</P>
<P>&nbsp; 这里我放出1种较为通用性和不可易被影响的处理方法。</P>
<P>&nbsp;最先在 网页页面的 最顶部写上</P>
<P>&nbsp;<style></P>
<P>&nbsp;div:focus{z-index:100;}&nbsp; // 这里随便你设定是多少值,100只是举个列子

</P>
<P></style></P>
<P>上面这个款式告知大家,当仅有div 得到聚焦点后 他会造成1个css特性便是 z-index被设定变成100,以任何方式丧失聚焦点 这个css特性就没了。自然你还可以设定别的的css特性。由于大家在点button实行涵数的情况下,div3也会丧失聚焦点(getSelection 仍然存在)</P>
<P>

</P>
<P>下列思路就清楚了 大家再写1个涵数</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.length; 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="";
break;
}
else
lastFocusID="";
}
}
//再添加1个全屏恶性事件
<PRE class=javascript name="code"> $(window).click(function(e)
{
if (window.getSelection)
{
var getevent=e.srcElement?e.srcElement:e.target;//不必告知我不知道道这句的意思
if(getevent.tagName=="INPUT" && getevent.id!=null && getevent.id=="cmdInsert")
{
//意味着 点了插进html的按钮
//则不实行getFocus方式
&nbsp;}
else
getFocus();//除非点了那个插进html的按钮 别的情况下务必要实行getFocus来升级最终丧失聚焦点的div
}
})</PRE>


<P></P>
<PRE></PRE>

&nbsp; 随后改动1下 insertHTML 这个方式 <PRE class=javascript name="code" sizcache="0" sizset="8"> function insertHTML(html)
{
var dthis=$("#div3")[0];
var sel, range;
if (window.getSelection)
{
if(lastFocusID!="div3")
{
<PRE class=javascript name="code"> $("#div3).html(dthis.innerHTML+html) ;//表明 客户将会在别的控制上 开展聚焦点或别的实际操作 则</PRE> return;//后边不实行了

}


。。。。。。。。。。//别的编码依旧

<PRE></PRE>

&nbsp;&nbsp;&nbsp; 这样就处理火狐或chrome里边 会出現乱插进內容的状况。
<P></P>
<P>

</P>
<P>&nbsp;&nbsp; 自然这只是1个思路, 欢迎大伙儿出示更好的方法和特性更高的思路。

</P>
<P>

</P>
</PRE></PRE>
上一篇:石家庄市企业网站建设赛亚 返回下一篇:没有了