§ ITPOW >> 文档 >> JavaScript >> DOM & DHTML

更简单的在光标处插入文字

作者：vkvi 来源：ITPOW（原创）日期：2008-11-12

本文代码比光标处插入文字一文代码简洁得多。

<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>更简单的在光标处插入文字 - ITPOW</title>
</head>

<body>

<form method="get">
  <div><textarea id="content" cols="50" rows="5">先在本文框中点鼠标以确定光标位置。ITPOW www.itpow.com</textarea></div>
  <div><input type="button" value="插入文字“A”" onclick="javascript:Insert('A');" /></div>
  <div><input type="button" value="插入文字“B”" onclick="javascript:Insert('B');" /></div>
</form>
<script type="text/javascript" language="javascript">
<!--
//ITPOW www.itpow.com

function Insert(str)
{
    document.getElementById("content").focus();
    var r = document.selection.createRange();
    document.selection.empty();
    r.text = str;
}

-->
</script>

</body>

</html>

[Ctrl+A 全部选择提示：您可先修改部分代码，再按运行]

如果你是选中文本框中的内容，则效果是替换选中的内容。

注意其中的 document.getElementById("content").focus();，这句保证后面的 selection 代码是对 content 这个文本框操作。

document.selection.empty() 这句不能换用 document.selection.clear()，虽然 clear() 从语义上说更合理，关于此请参见 document.selection 的 empty() 与 clear() 特殊用法。

电邮：cftea@126.com