js textarea焦点事件,CodeMirror焦点事件

2023-11-17

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>  

总结:以上用法,我根据自己需求,验证了部分用法,并成功实现需求,其他未验证的部分,欢迎各位验证指正。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

js textarea焦点事件,CodeMirror焦点事件 的相关文章

随机推荐

  • [翻译] ProtoBuf 官方文档(全)

    ProtoBuf CSDN搜索 https so csdn net so search q ProtoBuf t blog u chuifuhuo6864
  • nginx重启命令

    nginx s reload 修改配置后重新加载生效 nginx s reopen 重新打开日志文件 nginx t c path to nginx conf 测试nginx配置文件是否正确 关闭nginx nginx s stop 快速停
  • 解决在Anaconda下安装tensorflow报错的问题 ModuleNotFoundError: No module named ‘tensorflow‘

    解决在Anaconda下安装tensorflow报错的问题 Traceback most recent call last File line 1 in ModuleNotFoundError No module named tensorf
  • 宽字节注入入门详解

    原理 GBK 占用两字节 ASCII占用一字节 PHP中编码为GBK 函数执行添加的是ASCII编码 添加的符号为 MYSQL默认字符集是GBK等宽字节字符集 大家都知道 df 被PHP转义 开启GPC 用addslashes函数 或者ic
  • 第二章-注入漏洞

    第二章 注入漏洞 第一节 SQL注入原理 1 1 SQL注入的原因 语言分类 解释型语言和编译型语言 解释型语言是一种在运行时由一个运行时组件解释语言代码并执行其中包含的指令的语言 而编译型语言是代码在生成时转换为机器指令 然后在运行时直接
  • uniapp弹幕滚动到底部

    发布的弹幕至于最底部
  • 【linux】linux 离线安装 curl命令

    文章目录 1 概述 2 curl安装步骤 3 验证 原创不易 且行且珍惜 1 概述 最近在忙一个艰苦的环境 没有yarn界面 没有flink界面 没有es界面 没有kibana界面 条件艰苦 且行且艰险 这个环境发现es日志不入库 然后查看
  • 内网渗透工具-反向代理FRP

    内网渗透工具 反向代理FRP 0x1 简介 FRP是一个比较流行而且成熟的内网渗透工具 支持 TCP UDP HTTP HTTPS 等多种协议 0x2 前期准备 工具准备 可在官方github仓库下载 https github com fa
  • ‘mvn‘不是内部或外部命令

    解决方案有两种 一 1 如果没有安装maven 在IDEA中使用maven 提示mvn不是内部命令 需要在环境变量中的用户变量的Path中添加maven的bin路径 重启下IDEA即可 1 环境变量 用户 2 Path 添加IDEA下的ma
  • Pytorch框架下训练网络的代码结构

    PyTorch 是一个基于 Torch 的 Python 开源机器学习库 用于自然语言处理等应用程序 它主要由 Facebook 的人工智能研究小组开发 PyTorch 提供两个高级功能 1 具有强大的 GPU 加速的张量计算 如 NumP
  • TCP/IP网络编程(6)

    1 IO复用 并发服务器的实现方法 在网络程序中 数据通信时间比CPU运算时间占比更大 因此 采用并发的形式向多个客户端提供服务是一种有效利用CPU的方式 并发服务器的主要实现模型及方法如下所示 多进程服务器 通过常见多个进程提供服务 多路
  • 内存泄漏3____内存泄漏, 内存溢出的区别与关系__内存抖动

    泄漏 memory leak 是指程序在申请内存后 无法释放已申请的内存空间 一次内存泄露危害可以忽略 但内存泄漏堆积后 会变得很严重 无论有多少空间 迟早会被占光 memory leak 最终会导致 OOM out of memory 看
  • web前端三大核心技术

    web前端三大核心技术 根据 W3C 标准 一个网页主要由三部分组成 结构 表现和行为 结构 超文本标记语言 HTML Hyper Text Markup Language HTML用于描述页面的结构 html5 是一门标记型语言 主要由一
  • 列存数据仓库怎样更高效

    很多数据仓库产品都采用了列式存储 如果数据表的总列数很多而计算涉及的列很少 采用列存就只读取需要的列即可 能够减少硬盘访问量 提高性能 特别是数据量非常大时 硬盘扫描和读取的时间占比很大 这时候列存的优势会很明显 那么 是不是只要用了列存就
  • 单链表的建立(C语言):头插法和尾插法建立单链表

    采用头插法建立单链表 该方法从一个空表开始 生成新结点 并将读取到的数据存放到新结点的数据域中 然后将新结点插入到当前链表的表头 即头结点之后 如图2 4所示 图2 4 头插法建立单链表 头插法建立单链表的算法如下 LinkList Cre
  • KMP算法是怎么被设计出来的

    定义 我们假设要在主串中寻找子串出现的所有位置 我们记主串中的开始位置为匹配位置 如在 abc 中匹配 bc 则匹配位置为 2 暴力 我们把匹配过程拆解为 枚举匹配位置 验证主串从匹配位置开始是否一一匹配子串 以此 有显然的 O n m
  • layui table 列覆盖

    layui table 列个数超过10列后 表头发生覆盖现象 临时解决方法 注释掉下面代码 if left div class layui table fixed layui table fixed l div class layui ta
  • DevC++小白程序-一元二次方程

    DevC 小白程序 一元二次方程 include
  • 智能化应用爆发,银行如何打造敏捷响应的智能中枢?

    在宏观经济增速放缓和互联网金融发展的双重压力下 银行已普遍开始了数字化转型 并向智能化方向迈进 不过在智能化转型过程中 银行也普遍面临数字资产建设能力不足 数据治理和AI模型开发自动化程度低等问题 银行需要搭建起适应未来的敏捷响应的智能中枢
  • js textarea焦点事件,CodeMirror焦点事件

    1 效果图 2 功能说明 当我把光标放在 指标对象 的控件框的时候 双击 字段名称 则字段数据写入指标对象控件框 当我把光标放在 指标维度 的控件框的时候 双击 字段名称 则字段数据写入指标维度控件框 当我把光标放在 指标sql 的控件框的