js selection range 插入空节点后怎么调整光标位置
发布时间:2025-05-21 07:52:16 发布人:远客网络
一、js selection range 插入空节点后怎么调整光标位置
1、当编辑区没有获得焦点或光标处range为空时，点击加粗按钮，在光标处添加一个strong标签，之后把光标移动到strong标签内，现在在移动光标的过程出现了问题。
2、var frag= range.createContextualFragment(“<strong></strong>”);
3、range.setStartAfter(lastNode);
4、这里添加的strong标签是空，如果strong里加入一个就可以获得lastChild，但现在它的lastChild是null，这样在setStartAfter时就找不到参照的lastNode对象了。
5、这里该如何创建空strong标签，或如何获取strong下参照节点。收起
6、点击加粗按钮后，在编辑区添加一个strong标签，把光标移动到strong内，继续输入时直接到strong内
7、如果strong内部有节点，比如文本或标签，那么frag.lastChild就会获得最后一个标签或文本节点，假设创建的是这样的标签
8、<strong>nbsp;</strong>
9、那执行insertNode后插入的html将是
10、光标<strong>nbsp;</strong>
11、继续输入的话，文字会出现在strong标签前而不是内部，也就不是加粗的，所以要调整光标位置，执行setStartAfter(lastNode)
12、也就是把光标设置到lastNode也就是;之后，html变成
13、<strong>nbsp;光标</strong>
二、spread js 中如何隐藏sheet页
首先添加相关的JS,CSS引用以及部署授权
<!DOCTYPE html><html xmlns=""><head>
<title>Spread HTML Page</title>
<link href="" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script></head></body></html>
GC.Spread.Sheets.LicenseKey="<Your Deployment Key>";</script>
之后设置承载spread的div，注意这里需要设置两个一个是隐藏起来不显示的。
<div id="hiddenWorkbook" style="display:none; width: 800px; height: 600px; border: 1px solid gray"></div>
<div id="ss" style="width: 800px; height: 600px; border: 1px solid gray"></div></body>
var hiddenWorkbook, excelIO, spread;
excelIO= new GC.Spread.Excel.IO();
hiddenWorkbook= new GC.Spread.Sheets.Workbook(document.getElementById("hiddenWorkbook"));
spread= new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
首先，我们需要建立相关导入��按钮
<input type="file" name="files[]" id="fileDemo" accept=".xlsx,.xls"/><input type="button" id="loadExcel" value="Import" onclick="ImportFileStart()"/>
function ImportFileStart(){ var excelFile= document.getElementById("fileDemo").files[0];
excelIO.open(excelFile, function(json){ var workbookObj= json;
hiddenWorkbook.fromJSON(workbookObj);
并将需要合并的Sheet所在的Excel导入至hiddenWorkbook中去。
接下来我们需要创建一个下拉菜单来供用户选择需要导入的Sheet
<div id="sheetSelection" style="display:none;">
<p style="display:inline">Select sheet to load:</p>
<select id="sheetSelect" style="display:inline"></select></div>
function CreateSheetSelect(){ var sheetSelectionDiv= document.getElementById('sheetSelection');
sheetSelectionDiv.style.display="inline"; var dropDown= document.getElementById('sheetSelect'); for(var s= 0; s< hiddenWorkbook.getSheetCount(); s++){
dropDown.options[dropDown.options.length]= new Option(hiddenWorkbook.sheets[s].name(), s);
之后在初始化的代码中调用该方法：
SpreadJS本身支持通过sheet.toJSON()方法来序列化指定的工作表，但是有些样式不是设置在sheet上，而是设置在样式表中的，这时候单纯序列化sheet导出，就无法满足了。还需要将样式表中的样式循环拷贝。代码如下：
spread.addSheet(); var sheetNumber= document.getElementById('sheetSelect').value; var sheetJson= JSON.stringify(hiddenWorkbook.getSheet(sheetNumber).toJSON());
hiddenWorkbook.getNamedStyles().forEach(function(namedStyle){
spread.addNamedStyle(namedStyle);
spread.getSheet(0).fromJSON(JSON.parse(sheetJson));
三、Select2.js下拉框使用小结
用了这么久的Select2插件，也该写篇文章总结总结。当初感觉Select2不是特别好用，但又找不到比它更好的下拉框插件。
在我的印象里Select2有2个版本，最新版本有一些新的特性，并且更新了一下方法参数，比最初版本要好看一些，本文针对新版本。
官网：
由于博客系统的原因，所以只能演示简单的功能。
一.文件需要引入select2.full.js、select2.min.css（4.0.1版本）和jquery.1.8.3及以上
最新版本的select2如果引用的jquery版本较低的话，某些功能无法正常使用。比如：清除功能allowClear: true
最新版本请使用<select></select>标签（对于本地化的数据你可以使用input，但ajax远程数据必须使用select）
placeholder占位提示文字，如果需要清楚功能，则必须设置placeholder。
select2默认的数据属性是id、text，新版本可以自定义，但还是用默认的比较好。所以提供的json中最好转换为id、text形式，当然可以添加其他属性。
var data= [{ id: 0, text:'enhancement'},{ id: 1, text:'bug'},{ id: 2, text:'duplicate'},{ id: 3, text:'invalid'},{ id: 4, text:'wontfix'}];$("#c01-select").select2({ data: data, placeholder:'请选择', allowClear:true})
$("#c01-select").select2({ ajax:{ url:"data.json", dataType:'json', delay: 250, data: function(params){ return{ q: params.term,};}, processResults: function(data){ return{ results: data};}, cache: true}, escapeMarkup: function(markup){ return markup;}, minimumInputLength: 1, templateResult: formatRepo, templateSelection: formatRepoSelection});
1.q: params.term查询参数（params.term表示输入框中内容，q发生到服务器的参数名；所以这里你可以添加自定义参数，如：stype:'person'）
2.processResults中results: data返回数据（返回最终数据给results，如果我的数据在data.res下，则返回data.res。这个与服务器返回json有关）
3.minimumInputLength最小需要输入多少个字符才进行查询，与之相关的maximumSelectionLength表示最大输入限制。
5.templateResult返回结果回调function formatRepo(repo){return repo.text},这样就可以将返回结果的的text显示到下拉框里，当然你可以return repo.text+"1";等
6.templateSelection选中项回调function formatRepoSelection(repo){return repo.text}
7.关于返回的 json的格式：select2默认json格式为[{id:1,text:'text'},{id:2,text:'text'}]，新版严格要求这样的格式，当然你可以添加列，如：[{id:1,text:'text',name:'liu'}]
var res=$("#c01-select").select2("data")[0];//单选var reslist=$("#c01-select").select2("data");//多选if(res==undefined){ alert("你没有选中任何项");}if(reslist.length){ alert("你选中任何项");}
//清空选择$("#c01-select").val(null).trigger("change");$("#c01-select").val("你的placeholder").trigger("change");//或者//如果你使用的是input标签（默认就是本地数据），你可以用$("#c01-select").val('');来清空选项//disabled$("#c01-select").prop("disabled", false);//可用$("#c01-select").prop("disabled", true);//不可用
$("#c01-select").select2({ data:data, multiple: true});
1.结果回调和选中回调名称：formatResult、formatSelection（老版）；templateResult、templateSelection（新版）
//老版，注意如果初始化时文本框中本身没有值（为空），则不会触发该方法initSelection: function(element, callback){ var id=$(element).val(); var data={ id: id, text: id};//这里是初始化的数据，你可以通过id来从服务器上获取（ajax），再装载进去 callback(data);}//新版，直接给select添加option$("#id").append(new Option("Jquery", 10001, false, true));//或者$("#id").append("<option value='10001'>Jquery</option>");
3.获取或设置值：select2("val")（老版）；$("select").val()（新版）
var res=$("#id").select2("data");//返回数组，单选就取res[0]；好处是不进可以获取id、text还可以获取其他属性，如res[0].names
4.停用或启用：$("select").enable(false);（老版）；$("select").prop("disabled", true);（新版）
5.主题样式：新版的样式已经更新，但如果想使用老版样式则可以设置 theme:"classic"
如果大家还想深入学习，可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。
