JavaScript 文本框脚本实现方法解析

HTML 文本框基础与区别

在 HTML 页面中，文本框主要通过两种元素呈现：使用 <input> 元素的单行文本框，以及使用 <textarea> 的多行文本框。尽管这两者在多数场景下的行为相似，但二者之间仍存在关键区别。

<textarea> 元素始终渲染为多行文本框。通过 rows 和 cols 特性可定义其尺寸，前者指定行数，后者指定列数，这与 <input> 元素的 size 特性类似。与 <input> 不同，<textarea> 的初始值必须置于开始标签与结束标签之间。

文本选择与 select 事件

选择文本

上述两种文本框均支持 select() 方法，用于选中框内所有文本。调用该方法时，除 Opera 浏览器外，大多数浏览器会自动将焦点移至文本框。该方法无需参数，可随时调用。

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

在文本框获得焦点时自动选中所有文本是常见做法，尤其当文本框包含默认值时。此举可避免用户手动逐个删除原有文本，提升操作体验。

选择（select）事件

与 select() 方法对应的是 select 事件，当用户选中文本框中的内容时触发。不过，该事件的具体触发时机因浏览器实现而异。

获取选中文本与部分选择

取得选择的文本

虽然 select 事件能告知用户何时选中了文本，却无法直接获取选中的具体内容。HTML5 通过新增 selectionStart 和 selectionEnd 两个属性解决了这一问题，这两个属性保存基于 0 的数值，分别表示选区起始和结束的偏移量。据此，可通过如下代码获取用户选中的文本。

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"

IE8 及更早版本支持通过范围对象选择部分文本。具体操作需先调用 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();
​
//选择前 3 个字符 "Hel"
range.collapse(true); 
range.moveStart("character", 0); 
range.moveEnd("character", 3); 
range.select();
​
//选择第 4 到第 6 个字符 "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 访问剪贴板数据的功能，随后 HTML5 规范也将剪贴板事件纳入标准。

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

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