`
hudeyong926
  • 浏览: 2028255 次
  • 来自: 武汉
社区版块
存档分类
最新评论

文本框文字处理工具类js+代码高亮组件

阅读更多

CodeMirror是一个很好的高亮编辑js库

//////// 文本框文字处理 ////////
/*
input 对象
if selectionStart=selectionEnd is point
else 是string
*/
function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {   //firefox
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  }else if (input.createTextRange) { //ie
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}
function setCaretToEnd (input) {
  setSelectionRange(input, input.value.length, input.value.length);
}
function setCaretToBegin (input) {
  setSelectionRange(input, 0, 0);
}
//自定义光标插入点位置
function setCaretToPos (input, pos) {
  setSelectionRange(input, pos, pos);
}
/*光标选中对象中的string
input 对象 eg:"Visit W3School...";
string 是匹配字符串  eg: "w3school"
*/
function selectString (input, string) {
    //RegExp(string, "i")  string 不区分大小写
  var match = new RegExp(string, "i").exec(input.value);//input.value 是否匹配有string
  if (match) {
    setSelectionRange (input, match.index, match.index + match[0].length);
  }
}
//替换string
function replaceSelection (input, replaceString) {
  if (input.setSelectionRange) {
    var selectionStart = input.selectionStart;
    var selectionEnd = input.selectionEnd;
    input.value = input.value.substring(0, selectionStart)
                  + replaceString
                  + input.value.substring(selectionEnd);
    if (selectionStart != selectionEnd) // has there been a selection
      setSelectionRange(input, selectionStart, selectionStart +replaceString.length);
    else // set caret
      setCaretToPos(input, selectionStart + replaceString.length);
  }
  else if (document.selection) {
    var range = document.selection.createRange();
    if (range.parentElement() == input) {
      var isCollapsed = range.text == '';
      range.text = replaceString;
      if (!isCollapsed)  { // there has been a selection
        //it appears range.select() should select the newly
        //inserted text but that fails with IE
        range.moveStart('character', -replaceString.length);
        range.select();
      }
    }
  }
}


/**
* 文本框光标定位
**/
function setCaretPosition(elemId, caretPos) {
    var elem = document.getElementById(elemId);
    if(elem != null&&caretPos!=0) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(elem.selectionStart) {
                elem.setSelectionRange(caretPos, caretPos);
            }
            elem.focus();
        }
        elem.scrollTop = elem.scrollHeight; 
    }
}
分享到:
评论

相关推荐

    支持的ReactNative文本框支持ios和android

    1. **React Native基础知识**:React Native是基于React.js的,React.js是Facebook推出的用于构建用户界面的JavaScript库。React Native将React的声明式编程模型带到移动开发中,使开发者可以使用一套代码库跨平台...

    动态图文结合输出源代码

    这些库允许开发者创建窗口、按钮、文本框等组件,并通过事件处理程序与用户进行交互。例如,我们可以通过`JFrame`创建一个窗口,`JLabel`显示图片,`JTextArea`或`JEditorPane`展示源代码。 在Swing中,可以使用`...

    extJs中关于formPanel动态添加组件的验证问题

    在EXT JS这个强大的JavaScript框架中,FormPanel是用于创建表单的重要组件,它允许开发者构建交互式的、数据驱动的Web应用程序。FormPanel不仅提供了一种布局管理方式,还支持各种表单元素,如文本框、复选框、下拉...

    网页文本编辑器

    在本文中,我们将深入探讨这类编辑器的工作原理、常见功能以及它们如何使用JavaScript(JS)和CSS实现。 首先,让我们了解网页文本编辑器的基础。网页编辑器通常是一个富文本编辑器(WYSIWYG,即“所见即所得”),...

    JAVA上百实例源码以及开源项目源代码

    有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印图片的路径,水印一般格式是gif,png,这种图片可以设置透明度、水印旋转等,可以参考代码加以改进做成小工具。 Java右键弹出...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    推荐通用文字图片JS不间断滚动封装类 代替Marquee 15.站长推荐全新兼容DIV+CSS版中国地图 JS+DIV+CSS支持热点效果的中国地图 16.支持4级树形 展开菜单插件dTree原版下载 2)JQuery Tab 1.jQuery.Switchable...

    Flex_4:开发RIA_应用程序.pdf

    - **了解Flex 组件:** Flex提供了大量的UI组件,如按钮、文本框等,这些组件可以通过MXML在应用程序中定义和配置。 - **分配组件属性:** 组件属性用于控制组件的行为和外观,可以通过MXML直接设置。 - **使用Flash...

    C#做的文本编辑器,功能比记事本还多

    2. **文本编辑器架构**:一个功能丰富的文本编辑器通常包含多个组件,如文本框(TextBox)用于显示和编辑文本,菜单栏和工具栏提供各种操作选项,状态栏显示当前状态等。 3. **文件操作**:读取、写入和保存文件是...

    一个丰富文本控件rich

    这类控件在各种应用程序中都有广泛应用,比如文字处理软件、电子邮件客户端、聊天工具等。 富文本控件相比普通的文本控件(如纯文本框)具有更高级的功能,可以提供更加丰富的用户体验。在Windows操作系统中,最...

    Editplus界面设计

    【Editplus界面设计】是一个专为用户提供简单运算功能的自定义编辑器,它结合了文本编辑和基础计算的特性,使得用户在编写代码或者进行文本处理的同时,能够方便地进行基本算术运算。这个编辑器可能由编程爱好者或...

    VC++Editer编辑器,可视化编辑

    6. **JavaScript支持**:对于需要动态效果的页面,编辑器可能支持JavaScript代码的插入和编辑,以便添加交互功能。 7. **错误检查与提示**:为了帮助开发者避免语法错误,编辑器可能包含代码高亮、自动补全和错误...

    对FCKeditor HTML编辑器 封装成自定义控件

    6. **插件集成**:FCKeditor支持扩展,可以通过开发或集成已有的插件来增强功能,例如添加表格工具、代码高亮等。 7. **性能优化**:封装后要注意性能问题,如减少不必要的DOM操作,优化图片加载,避免内存泄漏等。...

    html后台模板

    Ace编辑器以其高性能和丰富的特性而受到欢迎,例如支持多种编程语言语法高亮、自动完成、代码折叠等功能。在HTML后台模板中,Ace编辑器可能被用作后台管理系统的代码编辑组件,方便管理员进行代码修改或配置调整。 ...

    HBuilderX纯净资源下载

    这款工具以其智能提示、代码高亮、自动格式化等功能受到了广大开发者的好评。在“HBuilderX纯净资源下载”中,我们主要关注的是它的一些核心组件和配置文件。 首先,`reset.bat`通常是一个批处理文件,用于执行一...

    ExtJS6学习资料

    - **推荐工具**:如 Visual Studio Code、WebStorm 等,这些 IDE 支持 ExtJS 的语法高亮、代码提示等功能,极大提升了开发效率。 - **插件支持**:许多 IDE 提供了针对 ExtJS 的扩展插件,可以进一步增强开发体验。 ...

    【QtCreator快速入门 】的相关讲义、ppt和源码

    - **代码编辑器**:支持语法高亮、自动完成、代码折叠等功能,提高编码效率。 - **项目管理器**:创建、管理和组织多个项目,支持Qt工程的配置。 - **设计模式**:通过图形化界面设计Qt界面,使用QML或Qt Widgets。 ...

    Qt4和Qdevelop快速上手

    1. **代码编辑器**: 支持语法高亮、自动完成和错误检查,提高编码效率。 2. **项目管理**: 可以轻松创建、管理和组织Qt项目。 3. **调试器**: 内置GDB调试器,方便查找和修复代码中的问题。 4. **构建系统**: 自动化...

Global site tag (gtag.js) - Google Analytics