1,效果图
2,功能说明
当我把光标放在【指标对象】的控件框的时候,双击【字段名称】,则字段数据写入指标对象控件框
当我把光标放在【指标维度】的控件框的时候,双击【字段名称】,则字段数据写入指标维度控件框
当我把光标放在【指标sql】的控件框的时候,双击【字段名称】,则字段数据写入指标sql控件框
也就是鼠标光标在哪,双击之后的数据就写入哪个控件框中
3,代码
样式代码:
<div class="flex height26" style="height: 100px;">
<div class="layui-form-item flex">
<label class="layui-form-label">指标对象</label>
<div class="layui-input-block marginleft10">
<textarea id="zbobj" type="text" name="zbobj" class="layui-textarea" onfocus="this.className='layui-textarea';this.onmousout='';getAddFocus('zbobj');"style=" width:410px;height: 84px;">${
entity.zbobj}</textarea>
</div>
</div>
</div>
<div class="flex height26" style="height: 100px;">
<div class="layui-form-item flex">
<label class="layui-form-label">指标维度</label>
<div class="layui-input-block marginleft10">
<textarea id="zbdimension" type="text" name="zbdimension" class="layui-textarea" onfocus="this.className='layui-textarea';this.onmousout='';getAddFocusdimen('zbdimension');"style=" width:410px;height: 84px;">${
entity.zbdimension}</textarea>
</div>
</div>
</div>
<div class="flex height26" style="height: 100px;">
<div class="layui-form-item flex">
<label class="layui-form-label">指标sql</label>
<div class="layui-input-block marginleft10">
<textarea id="zbsql" type="text" name="zbsql" class="layui-textarea"
style=" width:410px;height: 84px;">${
entity.zbsql}</textarea>
</div>
</div>
</div>
事件代码:
思路:
1,设置一个标签值status,监控光标在哪个选择器的控件中
2,根据status的值,对数据表格中获取的数据写入控件中
//设置默认状态
var status=1;
//设置编辑器文本框样式,想要起作用,需要引入对应的js文件
editor = CodeMirror.fromTextArea(document.getElementById("zbsql"), {
lineNumbers: true,
matchBrackets: true,
lineWrapping:true,
mode: "text/x-plsql"
});
editor.setOption("theme", "eclipse");
editor.setSize('410px','86px');
editor.setValue($("#zbsql").val());
//监控控件状态
function getAddFocus(id) {
//针对添加操作中的简介和备注,textarea获得焦点清空输入框
status=1;
}
function getAddFocusdimen(id) {
//针对添加操作中的简介和备注,textarea获得焦点清空输入框
status=2;
}
editor.on("focus",function(){
status=3;
});
//获取光标所在输入框,传值
function selectTableField(selectformCode,fieldcode,selectformName,fieldzhname){
// var relation="["+name+"."+code+"]";
if(status==1){
var str=$("#zbobj").val()+","
$("#zbobj").val(str+fieldcode)
}else if (status==2){
var str=$("#zbdimension").val()+","
$("#zbdimension").val(str+fieldcode)
}else if (status==3){
tablecode=selectformCode;
tablefield=fieldcode;
if(tablecode!=undefined){
expression+="["+tablecode+"."+tablefield+"]"
}
var relation="["+selectformName+"."+fieldzhname+"]";
var selection=editor.getSelection();
editor.replaceSelection(selection+relation);
// editor.setValue("["+selectformCode+"."+fieldcode+"]");
var content=editor.getValue();
editor.focus();
}
}
4,知识
1,原文链接:codeMirror事件的简单应用
下面是对各种事件的总结:
各种CodeMirror对象都会触发事件,客户端代码通过这些事件对各种情况作出反应。这些事件可以通过on和off来绑定和解除绑
定处理函数。如果要触发自定义的事件,使用CodeMirror.signal(target, name, args…),
其中,target是一个非DOM节点(non-DOM-node)对象。
1:change:每次编辑器内容更改时触发
2:changes:这个事件和change事件类似,只是这个事件会批处理每个操作
3:beforeChange:事件在更改生效前触发
4:cursorActivity:当光标或选中(内容)发生变化,或者编辑器的内容发生了更改的时候触发。
5:keyHandled:快捷键映射(key map)中的快捷键被处理(handle)后触发
6:inputRead:当用户输入或粘贴时编辑器时触发
7:electrictInput:收到指定的electrict输入时触发,会影响行缩进。
8:beforeSelectionChange:此事件在选中内容变化前触发
9:viewportChange:编辑器的视口( view port )改变(滚动,编辑或其它动作)时触发。
10:swapDoc:使用swapDoc替换编辑器内的文档时触发
11:gutterClick:编辑器的gutter(行号区域)点击时触发。
12:gutterContextMenu:编辑器的gutter(行号区域)收到上下文菜单事件时触发。
13:focus:编辑器收到焦点时触发
14:blur:编辑器失去焦点时触发。
15:scroll:编辑器滚动条滚动时触发
16:scrollCursorIntoView:编辑器滚动光标到视口内时触发
17:update:当CodeMirror更新其DOM显示时触发
18:renderLine:行渲染或重新渲染时触发。
2,原文链接:textarea焦点的用法(获取焦点清空,失去焦点提示)
参考应用:
<tr>
<td align="right" valign="top">备注:</td>
<td><textarea name="" id="remark" cols="" rows="" class="textarea220" οnfοcus="this.className='textarea220L';this.οnmοuseοut='';getAddFocus('remark');" οnblur="this.className='textarea220';this.οnmοuseοut=function(){this.className='textarea220'};lostAddFocus('remark');" οnmοusemοve="this.className='textarea220Lg'" οnmοuseοut="this.className='textarea220'"></textarea></td>
</tr>
textarea焦点的用法参考:
1.文本框显示默认文字:
<textarea>白鸽男孩</textarea>
<textarea>白鸽男孩</textarea>
2.鼠标点击文本框,默认文字消失:
<textarea οnfοcus=”if(value==’白鸽男孩’) {
value=’ ‘}”>白鸽男孩</textarea>
<textarea οnfοcus=”if(value==’白鸽男孩’) {
value=’ ‘}”>白鸽男孩</textarea>
3.鼠标移至文本框,默认文字消失:
<textarea οnmοuseοver=”focus()” οnfοcus=”if(value==’白鸽男孩’) {
value=’ ‘}”>白鸽男孩</textarea>
<textarea οnmοuseοver=”focus()” οnfοcus=”if(value==’白鸽男孩’) {
value=’ ‘}”>白鸽男孩</textarea>
4.鼠标点击文本框,默认文字消失,点击文本框外任意区域,默认文字又重现:
<textarea οnfοcus=”if(value==’白鸽男孩’) {
value=’ ‘}” οnblur=”if(value==’ ‘) {
value=’白鸽男孩’}”>白鸽男孩</textarea>
<textarea οnfοcus=”if(value==’白鸽男孩’) {
value=’ ‘}” οnblur=”if(value==’ ‘) {
value=’白鸽男孩’}”>白鸽男孩</textarea>
5.鼠标移至文本框,默认文字消失,鼠标移出文本框,默认文字又重现:
<textarea οnmοuseοver=”focus()” οnfοcus=”if(value==’白鸽男孩’) {
value=’ ‘}” οnmοuseοut=”blur()” οnblur=”if (value==’ ‘) {
value=’白鸽男孩’}”>白鸽男孩</textarea>
<textarea οnmοuseοver=”focus()” οnfοcus=”if(value==’白鸽男孩’) {
value=’ ‘}” οnmοuseοut=”blur()” οnblur=”if (value==’ ‘) {
value=’白鸽男孩’}”>白鸽男孩</textarea>
6.鼠标单击文本框,文本框内任何文字消失(包括默认文字及后来输入的文字):
<textarea οnclick=”value=’ ‘”>白鸽男孩</textarea>
<textarea οnclick=”value=’ ‘”>白鸽男孩</textarea>
7.鼠标移至文本框,文本框内任何文字消失(包括默认文字及后来输入的文字):
<textarea οnmοuseοver=”value=’ ‘”>白鸽男孩</textarea>
<textarea οnmοuseοver=”value=’ ‘”>白鸽男孩</textarea>
8.单击文本框后全选文本框内的文字:
<textarea οnfοcus=”select()”>白鸽男孩</textarea>
<textarea οnfοcus=”select()”>白鸽男孩</textarea>
9.鼠标移至文本框全选文本框内的文字:
<textarea οnmοuseοver=”focus()” οnfοcus=”select()”>白鸽男孩</textarea>
<textarea οnmοuseοver=”focus()” οnfοcus=”select()”>白鸽男孩</textarea>
10.回车后焦点从当前文本框转移到下一个文本框:
<textarea οnkeydοwn=”if(event.keyCode==13)event.keyCode=9″>白鸽男孩</textarea>
<textarea οnkeydοwn=”if(event.keyCode==13)event.keyCode=9″>白鸽男孩</textarea>
11.回车后焦点从当前文本框转移到指定位置:
<textarea οnkeypress=”return focusNext(this,’指定位置的id名称’,event)”>白鸽男孩</textarea>
总结:以上用法,我根据自己需求,验证了部分用法,并成功实现需求,其他未验证的部分,欢迎各位验证指正。