AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2016-05-12 1977
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

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

Java代码   收藏代码
  1. //////// 文本框文字处理 ////////  
  2. /* 
  3. input 对象 
  4. if selectionStart=selectionEnd is point 
  5. else 是string 
  6. */  
  7. function setSelectionRange(input, selectionStart, selectionEnd) {  
  8.   if (input.setSelectionRange) {   //firefox  
  9.     input.focus();  
  10.     input.setSelectionRange(selectionStart, selectionEnd);  
  11.   }else if (input.createTextRange) { //ie  
  12.     var range = input.createTextRange();  
  13.     range.collapse(true);  
  14.     range.moveEnd('character', selectionEnd);  
  15.     range.moveStart('character', selectionStart);  
  16.     range.select();  
  17.   }  
  18. }  
  19. function setCaretToEnd (input) {  
  20.   setSelectionRange(input, input.value.length, input.value.length);  
  21. }  
  22. function setCaretToBegin (input) {  
  23.   setSelectionRange(input, 0, 0);  
  24. }  
  25. //自定义光标插入点位置  
  26. function setCaretToPos (input, pos) {  
  27.   setSelectionRange(input, pos, pos);  
  28. }  
  29. /*光标选中对象中的string 
  30. input 对象 eg:"Visit W3School..."; 
  31. string 是匹配字符串  eg: "w3school" 
  32. */  
  33. function selectString (input, string) {  
  34.     //RegExp(string, "i")  string 不区分大小写  
  35.   var match = new RegExp(string, "i").exec(input.value);//input.value 是否匹配有string  
  36.   if (match) {  
  37.     setSelectionRange (input, match.index, match.index + match[0].length);  
  38.   }  
  39. }  
  40. //替换string  
  41. function replaceSelection (input, replaceString) {  
  42.   if (input.setSelectionRange) {  
  43.     var selectionStart = input.selectionStart;  
  44.     var selectionEnd = input.selectionEnd;  
  45.     input.value = input.value.substring(0, selectionStart)  
  46.                   + replaceString  
  47.                   + input.value.substring(selectionEnd);  
  48.     if (selectionStart != selectionEnd) // has there been a selection  
  49.       setSelectionRange(input, selectionStart, selectionStart +replaceString.length);  
  50.     else // set caret  
  51.       setCaretToPos(input, selectionStart + replaceString.length);  
  52.   }  
  53.   else if (document.selection) {  
  54.     var range = document.selection.createRange();  
  55.     if (range.parentElement() == input) {  
  56.       var isCollapsed = range.text == '';  
  57.       range.text = replaceString;  
  58.       if (!isCollapsed)  { // there has been a selection  
  59.         //it appears range.select() should select the newly  
  60.         //inserted text but that fails with IE  
  61.         range.moveStart('character', -replaceString.length);  
  62.         range.select();  
  63.       }  
  64.     }  
  65.   }  
  66. }  
  67.   
  68.   
  69. /** 
  70. * 文本框光标定位 
  71. **/  
  72. function setCaretPosition(elemId, caretPos) {  
  73.     var elem = document.getElementById(elemId);  
  74.     if(elem != null&&caretPos!=0) {  
  75.         if(elem.createTextRange) {  
  76.             var range = elem.createTextRange();  
  77.             range.move('character', caretPos);  
  78.             range.select();  
  79.         }  
  80.         else {  
  81.             if(elem.selectionStart) {  
  82.                 elem.setSelectionRange(caretPos, caretPos);  
  83.             }  
  84.             elem.focus();  
  85.         }  
  86.         elem.scrollTop = elem.scrollHeight;   
  87.     }  
  88. }  

弹出框div页面居中/遮罩

Java代码   收藏代码
  1. function _getposition(){  
  2.     var p = {};  
  3.     var scrollWidth, scrollHeight;  
  4.     if(window.innerHeight && window.scrollMaxY){  
  5.         scrollWidth = window.innerWidth + window.scrollMaxX;  
  6.         scrollHeight = window.innerHeight + window.scrollMaxY;  
  7.     }else if(document.body.scrollHeight>document.body.offsetHeight){  
  8.         scrollWidth = document.body.scrollWidth;  
  9.         scrollHeight = document.body.scrollHeight;  
  10.     }else{  
  11.         scrollWidth = document.body.offsetWidth;  
  12.         scrollHeight = document.body.offsetHeight;  
  13.     }  
  14.     if(self.innerHeight){  
  15.         if(document.documentElement.clientWidth){  
  16.             p.windowWidth = document.documentElement.clientWidth;  
  17.         }else{  
  18.             p.windowWidth = self.innerWidth;  
  19.         }  
  20.         p.windowHeight = self.innerHeight;  
  21.     }else if(document.documentElement && document.documentElement.clientHeight){  
  22.         p.windowWidth = document.documentElement.clientWidth;  
  23.         p.windowHeight = document.documentElement.clientHeight;  
  24.     }else if(document.body){  
  25.         p.windowWidth = document.body.clientWidth;  
  26.         p.windowHeight = document.body.clientHeight;  
  27.     }  
  28.     if(scrollWidth < p.windowWidth){  
  29.         p.width = scrollWidth;  
  30.     }else{  
  31.         p.width = p.windowWidth;  
  32.     }  
  33.     if(scrollHeight < p.windowHeight){  
  34.         p.height = scrollHeight;  
  35.     }else{  
  36.         p.height = p.windowHeight;  
  37.     }  
  38.     p.windowWidth = Math.max(p.windowWidth, scrollWidth);  
  39.     p.windowHeight = Math.max(p.windowHeight, scrollHeight);  
  40.   
  41.     if(typeof(window.pageXOffset) == "number"){  
  42.         p.left = window.pageXOffset;  
  43.     }else if(document.documentElement && document.documentElement.scrollLeft){  
  44.         p.left = document.documentElement.scrollLeft;  
  45.     }else if(document.body){  
  46.         p.left = document.body.scrollLeft;  
  47.     }else if(window.scrollX){  
  48.         p.left = window.scrollX;  
  49.     }  
  50.   
  51.     if(typeof(window.pageYOffset) == "number"){  
  52.         p.top = window.pageYOffset;  
  53.     }else if(document.documentElement && document.documentElement.scrollTop){  
  54.         p.top = document.documentElement.scrollTop;  
  55.     }else if(document.body){  
  56.         p.top = document.body.scrollTop;  
  57.     }else if(window.scrollY){  
  58.         p.top = window.scrollY;  
  59.     }  
  60.     return p;  
  61. }  
  62. var p = _getposition();  
  63. var left = p.left + ((p.width - $("#ddl_egg_msg_div").width()) / 2);  
  64. var top = p.top + ((p.height - $("#ddl_egg_msg_div").height()) / 2);                          
  65. $("#ddl_egg_msg_div").css({left:left,top:top});  
  66. $("#coverdiv").width(p.width).height(p.windowHeight).show();//整页遮罩  

 div出现在页面的随机位置，抽奖程序

Java代码   收藏代码
  1. var sHeight = jQuery(document.body).outerHeight(true) - 100;  
  2. var sWidth = jQuery(document.body).outerWidth(true) - 100;  
  3.   
  4. var div_top  = GetRandomNum(0,sHeight);  
  5. var div_left = GetRandomNum(0,sWidth);  
  6.   
  7. jQuery("#div").css("position","absolute");  
  8. jQuery("#div").css("z-index",100000);  
  9. jQuery("#div").css("top",div_top);  
  10. jQuery("#div").css("left",div_left);  
  11.   
  12. function GetRandomNum(Min,Max)  
  13. {  
  14.     var Range = Max - Min;  
  15.     var Rand = Math.random();  
  16.     return(Min + Math.round(Rand * Range));  
  17. }  

 抽奖金额的概率

Java代码   收藏代码
  1. <?php  
  2. $arr = array(20, 20, 20, 20, 20, 30, 30, 30, 30, 50);  
  3. $k = array_rand($arr);  
  4. $giftValue = $arr[$k];  
  5. //echo $giftValue;  
  6. ?>  

 

文章标签：
JavaScript
前端开发
Java
关键词：
JavaScript组件
JavaScript文本框
文本框JavaScript
JavaScript代码高亮
航空母舰
目录
相关文章
土木林森
|
4月前
|
JavaScript 前端开发 开发者
哇塞！Vue.js 与 Web Components 携手，掀起前端组件复用风暴，震撼你的开发世界！
【8月更文挑战第30天】这段内容介绍了Vue.js和Web Components在前端开发中的优势及二者结合的可能性。Vue.js提供高效简洁的组件化开发，单个组件包含模板、脚本和样式，方便构建复杂用户界面。Web Components作为新兴技术标准，利用自定义元素、Shadow DOM等技术创建封装性强的自定义HTML元素，实现跨框架复用。结合二者，不仅增强了Web Components的逻辑和交互功能，还实现了Vue.js组件在不同框架中的复用，提高了开发效率和可维护性。未来前端开发中，这种结合将大有可为。
土木林森
162 0
一缕微风绕指柔
|
2月前
|
JavaScript 前端开发 API
探索Vue.js 3的组合式API：一种更灵活的组件状态管理方式
【10月更文挑战第5天】探索Vue.js 3的组合式API：一种更灵活的组件状态管理方式
一缕微风绕指柔
31 1
游客qeoynko2nmbgk
|
3月前
|
Web App开发 JavaScript 前端开发
用 JavaScript 创建 XPCOM 组件
用 JavaScript 创建 XPCOM 组件
游客qeoynko2nmbgk
31 0
土木林森
|
4月前
|
JavaScript 前端开发
揭秘Vue.js组件魔法：如何轻松驾驭前端代码，让维护变得轻而易举？
【8月更文挑战第30天】本文探讨了如何利用Vue.js的组件化开发提升前端代码的可维护性。组件化开发将复杂页面拆分为独立、可复用的组件，提高开发效率和代码可维护性。Vue.js支持全局及局部组件注册，并提供了多种组件间通信方式如props、事件等。通过示例展示了组件定义、数据传递及复用组合的方法，强调了组件化开发在实际项目中的重要性。
土木林森
46 1
1313310884104708
|
4月前
|
JavaScript 前端开发 测试技术
[译]: Vue.js 函数式组件：what, why & when?
[译]: Vue.js 函数式组件：what, why & when?
1313310884104708
25 0
[译]: Vue.js 函数式组件：what, why & when?
土木林森
|
4月前
|
Android开发 iOS开发 C#
Xamarin：用C#打造跨平台移动应用的终极利器——从零开始构建你的第一个iOS与Android通用App，体验前所未有的高效与便捷开发之旅
【8月更文挑战第31天】Xamarin 是一个强大的框架，允许开发者使用单一的 C# 代码库构建高性能的原生移动应用，支持 iOS、Android 和 Windows 平台。作为微软的一部分，Xamarin 充分利用了 .NET 框架的强大功能，提供了丰富的 API 和工具集，简化了跨平台移动应用开发。本文通过一个简单的示例应用介绍了如何使用 Xamarin.Forms 快速创建跨平台应用，包括设置开发环境、定义用户界面和实现按钮点击事件处理逻辑。这个示例展示了 Xamarin.Forms 的基本功能，帮助开发者提高开发效率并实现一致的用户体验。
土木林森
168 0
土木林森
|
4月前
|
JavaScript 开发者
揭秘Vue.js生命周期钩子：它们是如何掌控组件的生与死？
【8月更文挑战第30天】Vue.js 的生命周期钩子是开发者必须掌握的关键概念，它涵盖了组件从创建、挂载、更新到销毁的整个过程，提供了在特定时机操作DOM、获取数据或执行逻辑的能力。从 `beforeCreate` 到 `unmounted`，每个阶段都有特定的任务：如 `created` 适合异步数据获取，`mounted` 用于DOM操作，而 `beforeUnmount` 则用于清理资源。
土木林森
35 0
乐多_L
|
4月前
|
JavaScript 前端开发
使用js对文本框设置字数限制
使用js对文本框设置字数限制
乐多_L
72 0
夏天49597
|
5月前
|
JavaScript 前端开发 API
前端框架与库 - Vue.js 组件与路由
【7月更文挑战第15天】Vue.js 框架以简洁API和高效DOM更新著名，组件和路由是构建应用的关键。组件是自包含的实例，常见问题包括命名冲突、作用域混淆和状态管理。要避免这些问题，可使用命名空间、明确数据绑定和事件，以及采用Vuex管理状态。Vue Router提供声明式路由，常见挑战包括路由守卫、动态路由参数和懒加载配置。正确使用路由守卫、处理动态参数和实现代码分割能优化路由管理。提供的代码示例展示了基本组件和路由配置。
夏天49597
51 1
爱你三千遍斯塔克
|
5月前
|
前端开发 JavaScript
文本，wangEditor5展示HTML无样式，wangEditor5如何看源码，Ctrl + U看CSS文件，代码高亮，Prism.js可以实现，解决方法，参考网页源代码的写法
文本，wangEditor5展示HTML无样式，wangEditor5如何看源码，Ctrl + U看CSS文件，代码高亮，Prism.js可以实现，解决方法，参考网页源代码的写法
爱你三千遍斯塔克
149 4

热门文章

最新文章

  • 1
    Node.js 中流操作实践
  • 2
    js数组遍历some,foreach,map,filter,every对比
  • 3
    JavaScript右下角信息提示插件Notyf
  • 4
    《JavaScript框架设计》——1.4　类型的判定
  • 5
    深入理解JavaScript系列（14）：作用域链(Scope Chain)
  • 6
    JavaScript学习之旅-9（原创）
  • 7
    【温故而知新-Javascript】使用Web存储
  • 8
    前端 时间个性化 插件 jquery.timeago.js
  • 9
    Nightwatch.js – 轻松实现浏览器的自动测试
  • 10
    JavaScript FAQ（六）——字符串
  • 1
    React和Next.js开发常见的HTTP请求方法
    124
  • 2
    JavaScript数据类型归纳，架构师花费近一年时间整理出来的前端核心知识
    42
  • 3
    前端 JS 经典：ES6 和 CommonJs 用法
    41
  • 4
    前端 JS 经典：宏任务、微任务、事件循环（EventLoop）
    65
  • 5
    前端 JS 经典：JSON 对象
    43
  • 6
    前端 JS 经典：递归
    41
  • 7
    前端 JS 经典：i，i++，++i区别
    59
  • 8
    前端 JS 经典：Math 常用方法汇总
    92
  • 9
    JavaScript：this-关键字，2024中级前端开发面试解答
    38
  • 10
    前端 JS 经典：let、const、var 区别
    39

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Vue.js完全自学手册图文教程
  • jQuery开发教程

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 图表样式智能美化工具
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
    • 下一篇
    阿里云对象存储OSS收费标准：存储、流量和请求等多个计费项详解