www.baike369.com
百科369 > JS教程 > JavaScript文本框中显示网页内选中的内容

JavaScript文本框中显示网页内选中的内容


JavaScript文本框中显示网页内选中的内容

为了方便我们的复制,可以将我们选择的内容显示在文本框内。


实例

下面是一个在文本框中显示网页内选中的内容的例子。源代码如下:

<!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-Type" content="text/html; charset=gb2312" />
<title>JavaScript文本框中显示网页内选中的内容实例-www.baike369.com</title>
<script type="text/javascript">
<!--
var txt1="";
function getSelect(){
  // 获取当前选中的文本
  txt1=(document.all)?document.selection.createRange().text:document.getSelection();
  // 显示选择的内容
  document.form1.txt1.value=txt1;
  return true;
}
// 绑定鼠标事件
document.onmouseup=getSelect;
if(!document.all)
{
  // Netscape下的鼠标事件捕获
  document.captureEvents(Event.MOUSEUP);
}
-->
</script>
</head>
<body>
<form name="form1">
<strong>被选中的文本:<input type="text" name="txt1" value="" /></strong>
</form>
<div>
百科369<br />
www.baike369.com
</div>
</body>
</html>

上述代码中:

  • 使用document.selection.createRange().text方法获取文档中选定的文本。
  • 使用createRange()方法创建TextRange对象,其text属性用于获取用户选中的文本。

显示效果如下:

JavaScript文本框中显示网页内选中的内容实例

Copyright© 2011-2016 www.baike369.com All Rights Reserved