JS无JQUERY的经典用法

Advertisement
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Demo : Textarea 元素的光标位置</title>
  6. <style>
  7. #result {
  8. font-size:18px;
  9. line-height:25px;
  10. padding-left:20px;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <h1>Textarea 元素的光标位置</h1>
  16. <ul>
  17. <li>获取 Textarea 元素当前的光标位置</li>
  18. <li>设置回原先的 Textarea 元素的光标位置</li>
  19. <li>在 Textarea 元素的光标位置插入文本</li>
  20. </ul>
  21. <form action="#">
  22. <textarea id="test" rows="8" cols="50"></textarea>
  23. <p>
  24. <input type="button" id="get" value="Get Cursor Position"/>
  25. <input type="button" id="set" value="Set Cursor Position"/>
  26. <input type="button" id="add" value="Add Text After Cursor Position"/>
  27. </p>
  28. </form>
  29. <h2>Textarea Range:</h2>
  30. <div id="result"></div>
  31. <script type="text/javascript">
  32. /**
  33. * cursorPosition Object
  34. *
  35. * Created by Blank Zheng on 2010/11/12.
  36. * Copyright (c) 2010 PlanABC.net. All rights reserved.
  37. *
  38. * The copyrights embodied in the content of this file are licensed under the BSD (revised) open source license.
  39. */
  40. var cursorPosition = {
  41. get: function (textarea) {
  42. var rangeData = {text: "", start: 0, end: 0 };
  43. if (textarea.setSelectionRange) { // W3C
  44. textarea.focus();
  45. rangeData.start= textarea.selectionStart;
  46. rangeData.end = textarea.selectionEnd;
  47. rangeData.text = (rangeData.start != rangeData.end) ? textarea.value.substring(rangeData.start, rangeData.end): "";
  48. } else if (document.selection) { // IE
  49. textarea.focus();
  50. var i,
  51. oS = document.selection.createRange(),
  52. // Don't: oR = textarea.createTextRange()
  53. oR = document.body.createTextRange();
  54. oR.moveToElementText(textarea);
  55. rangeData.text = oS.text;
  56. rangeData.bookmark = oS.getBookmark();
  57. // object.moveStart(sUnit [, iCount])
  58. // Return Value: Integer that returns the number of units moved.
  59. for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1) !== 0; i ++) {
  60. // Why? You can alert(textarea.value.length)
  61. if (textarea.value.charAt(i) == '\r' ) {
  62. i ++;
  63. }
  64. }
  65. rangeData.start = i;
  66. rangeDatarangeData.end = rangeData.text.length + rangeData.start;
  67. }
  68. return rangeData;
  69. },
  70. set: function (textarea, rangeData) {
  71. var oR, start, end;
  72. if(!rangeData) {
  73. alert("You must get cursor position first.")
  74. }
  75. textarea.focus();
  76. if (textarea.setSelectionRange) { // W3C
  77. textarea.setSelectionRange(rangeData.start, rangeData.end);
  78. } else if (textarea.createTextRange) { // IE
  79. oR = textarea.createTextRange();
  80. // Fixbug : ues moveToBookmark()
  81. // In IE, if cursor position at the end of textarea, the set function don't work
  82. if(textarea.value.length === rangeData.start) {
  83. //alert('hello')
  84. oR.collapse(false);
  85. oR.select();
  86. } else {
  87. oR.moveToBookmark(rangeData.bookmark);
  88. oR.select();
  89. }
  90. }
  91. },
  92. add: function (textarea, rangeData, text) {
  93. var oValue, nValue, oR, sR, nStart, nEnd, st;
  94. this.set(textarea, rangeData);
  95. if (textarea.setSelectionRange) { // W3C
  96. oValue = textarea.value;
  97. nValue = oValue.substring(0, rangeData.start) + text + oValue.substring(rangeData.end);
  98. nStart = nEnd = rangeData.start + text.length;
  99. st = textarea.scrollTop;
  100. textarea.value = nValue;
  101. // Fixbug:
  102. // After textarea.values = nValue, scrollTop value to 0
  103. if(textarea.scrollTop != st) {
  104. textarea.scrollTop = st;
  105. }
  106. textarea.setSelectionRange(nStart, nEnd);
  107. } else if (textarea.createTextRange) { // IE
  108. sR = document.selection.createRange();
  109. sR.text = text;
  110. sR.setEndPoint('StartToEnd', sR);
  111. sR.select();
  112. }
  113. }
  114. }
  115. var tx=document.getElementById("test"),
  116. re=document.getElementById("result"),
  117. pos;
  118. document.getElementById("get").onclick = function(){
  119. //alert(tx.value.length);
  120. pos = cursorPosition.get(tx);
  121. re.innerHTML=("<strong>Range :</strong> (" + pos.start + ", " + pos.end + ")<br /><strong>Text :</strong> " + (!pos.text ? '//--': pos.text));
  122. }
  123. document.getElementById("set").onclick = function(){
  124. cursorPosition.set(tx, pos);
  125. }
  126. document.getElementById("add").onclick = function(){
  127. cursorPosition.add(tx, pos, input = prompt("你想插入替换的文本:",""));
  128. }
  129. </script>
  130. </body>
  131. </html>

Similar Posts:

  • Jquery选择器特殊用法

    这个标题似乎有些奇怪,但这些都是合法有效的jquery选择器.在这里将他们逻列一起,是因为他们比较容易引起混淆.下面就通过例子来说明他们之间的不同之处. $("parent > child") [html] view plaincopy <div> <span>123</span> <p> <span>456</span> </p> <span>789</span> <

  • JS和jQuery使用submit方法无法提交表单的原因分析及解决办法

    昨天,在做一个表单异步提交内容的时候,遇到很奇怪的问题,submit()方法无法进行提交,每次提交都是把 当前给刷新了,网络抓包发现,每次都是 get方式去获取 当前页面,完全没有post 请求,想着以前 遇上这样的问题 都是因为 表单中 有 name 或者 id 这些命名跟submit 有冲突,但是检查了几次,始终没有发现 名字冲突,所以这个可能性被排除. 平常自己做触发按钮,基本不用a 标签,但是昨天不知道什么 问题,竟然用了 a 而且还给了 href 为空,由于这个a 的class 有多个

  • jQuery菜单插件用法实例

    本文实例讲述了jQuery菜单插件用法.分享给大家供大家参考.具体如下: 这里要分享的是一个菜单插件,在http://plugins.jquery.com/keleyi/ 看到的,使用找个插件可以制作页面底部向上弹出的菜单,不一定在页底,还有多种其他方式. jQuery菜单插件js文件: /*! * Keleyi(jQuery Menu) * version: 0.1.6 * Copyright (c) 2013 KeLeyi */ (function ($) { $.fn.keleyi = f

  • 两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js

    估计网上能查到的最多的两种图片延迟加载方法就是jquery.scrollLoading.js与jquery.lazyload.js了,其中jquery.lazyload.js的调用方法因为有网友爆出的bug,改进了调用方法,另外修改了关于浏览器IE版本的判断.以下直接为代码,并没有什么修改.做个记号. 两种方法都采用jquery-1.8.3.min.js版本. jquery.scrollLoading方法 html <!DOCTYPE html> <html xmlns="ht

  • 18款js和jquery文字特效代码分享

    18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形球状的3D云标签动画效果 原生js tagscloud文字标签云仿快播文字标签云上下滚动出现 jquery文字跳舞鼠标滑过段落文字波浪线条跳动 jquery lettering书写中文彩色文字_html彩色文字特效 jquery 文字特效霓虹灯文字效果使用jQuery和CSS jquery文字动画插

  • js和jquery取值问题

    <li class="active"></li> <li class="start open active"></li> $(".active")两个li都取到了 怎么用js或者jquery取第一个li 而不是两个li都取到 修改一下问题: 这两个标签也有可能是这样放的 <li class="start open active"></li> <li

  • JS和Jquery操作label标签

    获取label值: label标签在JS和Jquery中使用不能像其他标签一样用value获取它的值: 代码如下: var label=document.getElementById("springok"); var value=label.value; var value=$("#id").val(); 或者这样: JS: 代码如下: var label=document.getElementById("springok"); var valu

  • 关于Jquery Ajax的用法

    今天简单描述一下Jquery Ajax的用法,和我在使用过程中的一些看法,仅供自己娱乐和大家参考值之用! Jquery Ajax的重要性不言而喻,只从Jquery面世之后,终于解救了像我这种既做前台又做后台,还艰难的学着JavaScipt的苦逼程序猿啊!废话不多说,直接进入主题. Jquery Ajax的方法有好几个,例如:Load().Get().Post()等等,但是最重要的就是Ajax()方法了.他是这些方法的底层,而且其他的方法都能使用Ajax()方法来实现,所以今天就记录一下对Ajax

  • 用原生js模仿jquery

    阅读声明:本文档仅供学习,由于个人能力有限,文档中有错漏的地方还请指出,大家共同学习. 目前在学习怎么样写jquery,模仿阶段,有兴趣的同学可以和我一起学习,共同交流,在学习的路上希望有你做伴. 在写这个jquery入口模式的时候,首先要知道有几种模式,然后再去些: 我知道的有两种: 一: $(function () { 需要在Document文档加载完成后执行的代码 }) 二: $(document).ready(function () { 需要在Document文档加载完成后执行的代码 }

  • js框架jquery瀑布流图片墙效果代码下载,点击相册图片展示大图

    原文:js框架jquery瀑布流图片墙效果代码下载,点击相册图片展示大图 源代码下载地址:http://www.zuidaima.com/share/1795084037721088.htm 还是老规矩,come on this pics 官方验证: firefox,chrome,ie8均支持,效果很棒,大家可以放心下载. 由最代码官方编辑于2014-4-25 12:04:12

Tags: