1. Effect picture
2. Function description
When I put the cursor on the control box of [indicator object], double-click [field name], the field data is written into the control box of the indicator object.
When I place the cursor on the control box of [indicator dimension], double-click the [field] Name], the field data is written into the indicator dimension control box.
When I place the cursor on the [indicator sql] control box, double-click the [field name], the field data is written into the indicator sql control box
, where the mouse cursor is. Which control box will the data after double-clicking be written
3. Code
Style code:
<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>
Event code:
Ideas:
1. Set a tag value status to monitor which selector control the cursor is in.
2. According to the value of status, write the data obtained in the data table into the control
//设置默认状态
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. Knowledge
1. Original link : Simple application of codeMirror event
The following is a summary of various events:
Various CodeMirror objects trigger events, and client code reacts to various situations through these events. These events can be bound and unbound by on and off
Set processing function. If you want to trigger a custom event, use CodeMirror.signal(target, name, args...),
Among them, target is a non-DOM-node (non-DOM-node) object.
1: change: triggered every time the editor content changes
2: changes: This event is similar to the change event, except that this event will batch each operation
3: beforeChange: the event is triggered before the change takes effect
4: cursorActivity: when the cursor or selection (content) changes, or the content of the editor occurs Triggered when it changes.
5: keyHandled:
Triggered after the shortcut key in the key map is processed (handle) 6: inputRead: Triggered when the user enters or pastes the editor
7: electrictInput: Triggered when the specified electrict input is received, will Affect line indentation.
8: beforeSelectionChange: This event is triggered before the selected content changes.
9: viewportChange: Triggered when the editor's view port (view port) changes (scrolling, editing or other actions).
10: swapDoc: trigger when swapDoc is used to replace the document in the editor.
11: gutterClick: trigger when the gutter (line number area) of the editor is clicked.
12: gutterContextMenu: triggered when the editor's gutter (line number area) receives a context menu event.
13: focus: trigger when the editor receives focus
14: blur: trigger when the editor loses focus.
15: scroll: trigger when the editor scroll bar scrolls
16: scrollCursorIntoView: trigger when the editor scrolls the cursor into the viewport
17: update: trigger when CodeMirror updates its DOM display
18: renderLine: trigger when the line is rendered or re-rendered.
2. Original link : The usage of textarea focus (getting focus is cleared, losing focus prompt)
Reference application:
<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>
The usage reference of textarea focus:
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>
Summary: For the above usage, I verified part of the usage according to my own needs and successfully realized the requirements. For other unverified parts, please verify and correct me.