华山资源网

Javascript文本框脚本实现方法解析
网络编程 2024/11/15 佚名
3 1

在 HTML 中，有两种方式来表现文本框：一种是使用<input>元素的单行文本框，另一种是使用 <textarea>的多行文本框。这两个控件非常相似，而且多数时候的行为也差不多。不过，它们之间仍 然存在一些重要的区别。

相对而言，<textarea>元素则始终会呈现为一个多行文本框。要指定文本框的大小，可以使用 rows 和 cols 特性。其中，rows 特性指定的是文本框的字符行数，而 cols 特性指定的是文本框的字符列数 （类似于 <inpu> 元素的 size 特性）。与 <input> 元素不同， <textarea> 的初始值必须要放在 <textarea>和</textarea>之间。

选择文本

上述两种文本框都支持 select()方法，这个方法用于选择文本框中的所有文本。在调用 select() 方法时，大多数浏览器（Opera 除外）都会将焦点设置到文本框中。这个方法不接受参数，可以在任何 时候被调用。

var textbox = document.forms[0].elements["textbox1"];
textbox.select();

在文本框获得焦点时选择其所有文本，这是一种非常常见的做法，特别是在文本框包含默认值的时 候。因为这样做可以让用户不必一个一个地删除文本。

"htmlcode"> 

function getSelectedText(textbox){
 return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
}

　　IE8 及更早的版本中有一个 document.selection 对象，其中保存着用户在整个文档范围内选择 的文本信息；兼容IE8的写法

function getSelectedText(textbox){ 
 if (typeof textbox.selectionStart == "number"){ 
  return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd); 
 } else if (document.selection){ 
  return document.selection.createRange().text;
 } 
}

选择部分文本

现在除 select()方法之外，所有文本框都有一个 setSelectionRange() 方法。这个方法接收两个参数：要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引 （类似于 substring()方法的两个参数）。

textbox.value = "Hello world!"
//选择所有文本
textbox.setSelectionRange(0, textbox.value.length); //"Hello world!"
//选择前 3 个字符
textbox.setSelectionRange(0, 3); //"Hel"
//选择第 4 到第 6 个字符
textbox.setSelectionRange(4, 7); //"o w"

E8 及更早版本支持使用范围选择部分文本。要选择文本框中的部分文本，必须 首先使用 IE 在所有文本框上提供的 createTextRange()方法创建一个范围，并将其放在恰当的位置 上。然后，再使用 moveStart()和 moveEnd()这两个范围方法将范围移动到位。不过，在调用这两个 方法以前，还必须使用 collapse()将范围折叠到文本框的开始位置。此时，moveStart()将范围的起 点和终点移动到了相同的位置，只要再给 moveEnd()传入要选择的字符总数即可。最后一步，就是使 用范围的 select()方法选择文本，如下面的例子所示。

textbox.value = "Hello world!";
var range = textbox.createTextRange();
//选择所有文本 "Hello world!"
range.collapse(true); range.moveStart("character", 0); 
range.moveEnd("character", textbox.value.length); 
range.select();
"Hel"
range.collapse(true); 
range.moveStart("character", 0); 
range.moveEnd("character", 3); 
range.select();
"o w"
range.collapse(true); 
range.moveStart("character", 4); 
range.moveEnd("character", 3); 
range.select();

兼容IE8的写法

function selectText(textbox, startIndex, stopIndex){
 if (textbox.setSelectionRange){ 
  textbox.setSelectionRange(startIndex, stopIndex); 
 } else if (textbox.createTextRange){ 
  var range = textbox.createTextRange(); 
  range.collapse(true); 
  range.moveStart("character", startIndex); 
  range.moveEnd("character", stopIndex - startIndex); 
  range.select();
  }
  textbox.focus();
}

操作剪贴板

IE 是第一个支持与剪贴板相关事件，以及通过 JavaScript 访问剪贴板数据的浏览器。HTML 5 后来也把剪贴板事件纳入了规范。

  • beforecopy：在发生复制操作前触发 。
  • copy：在发生复制操作时触发。
  • beforecut：在发生剪切操作前触发。
  • cut：在发生剪切操作时触发。
  • beforepaste：在发生粘贴操作前触发。
  • paste：在发生粘贴操作时触发。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com