`
shylhd
  • 浏览: 76781 次
  • 性别: Icon_minigender_2
  • 来自: 河北
最近访客 更多访客>>
xx5333
社区版块
存档分类
最新评论

在光标位置插入字符实例

JavaScriptXHTMLHTMLFirefoxCache 
阅读更多

1  指定某文本部分进行操作（添加，删除，替换）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
<SCRIPT   LANGUAGE="JavaScript">  
  function   meizz(str)  
  {  
  document.selection.createRange().select();  //javascript指定某文本部分进行操作（添加，删除，替换）
  var   t   =   document.selection.createRange(); 
 
  t.text   =   str;  
  }  
  </SCRIPT>  
 <BODY>
<textarea   name=mm   onclick="meizz('梅花雪')">asdfghjkl</textarea><br>  
   
 

 </BODY>
</HTML>

 

 

 

2   光标处插入文字

 

 <?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>更简单的在光标处插入文字 - 千一网络</title>
</head>

<body>

<form method="get">
  <div><textarea id="content" cols="50" rows="5">先在本文框中点鼠标以确定光标位置。千一网络 www.cftea.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">
<!--
//千一网络 www.cftea.com

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

-->
</script>

</body>

</html>

 

 

3

<!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>
<title>edit</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<meta name="keywords" content="XH.WebV7.0.0-Blog">
<meta http-equiv="pragma" content="no-cache">

<script type="text/javascript">


function setCaret(textObj){
 if(textObj.createTextRange)
 {
  textObj.caretPos=document.selection.createRange().duplicate();
 }
}

 


function insertAtCaret(textObj,textFeildValue){
if(document.all)
{
 if(textObj.createTextRange&&textObj.caretPos)
 {
  var caretPos=textObj.caretPos;
  caretPos.text=caretPos.text.charAt(caretPos.text.length-1)==''?textFeildValue+'':textFeildValue;

 }else
 {
  textObj.value=textFeildValue;
 }
}else
{
 if(textObj.setSelectionRange)
 {
  var rangeStart=textObj.selectionStart;
  var rangeEnd=textObj.selectionEnd;
  var tempStr1=textObj.value.substring(0,rangeStart);
  var tempStr2=textObj.value.substring(rangeEnd);
  textObj.value=tempStr1+textFeildValue+tempStr2;
 }else
 {
  alert("This version of Mozilla based browser does not support setSelectionRange");}
 }
}
</script>

</head>
<body>

<form id="form1" action="" onsubmit="" method="post" enctype="text/plain">
<p>
<textarea name="tarea" rows="" cols="" style="width:300px;height:120px;" onselect="setCaret(this);" onclick="setCaret(this);" onkeyup="setCaret(this);">
Dnew.cn Dnew.cn
</textarea>
<br/><br/>
<input type="text" name="textfield" style="width:220px;" value="插入FireFox"/>
<br/>
<input type="button" value="插入" onclick="insertAtCaret(this.form.tarea,this.form.textfield.value);"/>
</p>
</form>
</body>
</html>

 

4 

<!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>

<title>document.selection 的 createRange</title>

</head>

<body>

<div>请选中这里的部分文字。</div>

<div><input type="button" value="加粗" onclick="javascript:Bold();" /></div>

<script type="text/javascript" language="javascript">

function Bold()

{          var r = document.selection.createRange();          r.execCommand("Bold");}</script>

</body>

</html>

 

 

以上4个例子可以直接看到效果。

分享到：
| pl/sql 入门
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    C#实现winform中RichTextBox在指定光标位置插入图片的方法

    本文实例讲述了C#实现winform中RichTextBox在指定光标位置插入图片的方法。分享给大家供大家参考，具体如下： //获取RichTextBox控件中鼠标焦点的索引位置 int startPosition = this.richTextBox1.SelectionStart; ...

    vue项目中在可编辑div光标位置插入内容的实现代码

    本文将详细介绍如何在Vue中实现在可编辑div的光标位置插入内容，并提供相关代码示例。 首先，我们需要一个可编辑的div元素，通过设置`contenteditable="true"`属性来使其变为可编辑。以下是一个简单的HTML结构： `...

    jQuery往textarea中光标所在位置插入文本的方法

    4. 插入文本：在textarea中插入文本涉及到的JavaScript操作包括获取当前光标位置、在光标位置插入字符串、恢复光标焦点等。本文通过判断浏览器类型和版本，使用不同的方法获取和设置光标位置。 5. 文本操作：在...

    在安卓系统中插入表情到光标位置的代码详解

    接下来，在光标位置插入表情字符串，使用`insert()`方法： ```java sBuilder.insert(index, insertEmotion); ``` 最后，更新EditText的文本，并设置新的光标位置。`setText()`方法用于设置EditText的文本内容，`...

    JS在textarea光标处插入文本的小例子

    该知识点的核心是编写一个能够在网页中的textarea元素里，基于当前光标位置插入字符串的JavaScript函数。这个功能对于开发者来说十分重要，它允许他们在用户界面中动态地添加内容，提升用户体验。 在提供的代码片段...

    Python 移动光标位置的方法

    - **文件写入**：在进行文件写入操作时，如果需要在文件的特定位置插入数据，也可以先使用`seek()`定位，再使用`write()`方法进行写入。 - **日志文件管理**：在处理日志文件时，可以利用这些方法快速定位到特定的...

    TextBox光标的问题

    在TextBox中获取光标的位置，并在光标位置插入字符，根据光标定位删除光标前的字符。顺便说一下，把字符串中的字母转换成大写的用.ToUpper()，转换成小写的用.ToLower()；具体实例在我写的示例中，与大家分享一下。

    VISUAL C++实效编程280例

    6.28 实例125：在列表控件中插入列 6.29 实例126：设置列表控件的显示方式 6.30 实例127：设置列表控件的背景图片 6.31 实例128：在列表控件中整行选中 6.32 实例129：在列表控件中显示网格线 6.33 实例130：在列表...

    FBD功能块语言PPT学习教案.pptx

    在FBD功能块语言中，用户可以在特定的位置放置光标，在任何时候，使用箭头键可以在选择的方向上跳到最近的光标位置。通过这种方式可以访问所有的光标位置包括文本区域。如果最近的光标位置被选中， 就可以使用 &lt;up&gt; ...

    计算机等考一级知识辅导：看实例学用WPS输特殊符.docx

    本篇文章将重点讲解如何在 WPS 中利用实例来输入特殊符号，特别是如何创建一个原子结构图。 首先，我们要了解 WPS 中的“插入”菜单。在 WPS 中，大部分特殊符号和公式的插入都是通过这个菜单进行的。在“插入”...

    Java开发实战1200例(第1卷).(清华出版.李钟尉.陈丹丹).part3

    实例073 根据标点符号对字符串进行分行 92 实例074 将字符串的每个字符进行倒序输出 94 实例075 获取字符串中汉字的个数 94 实例076 批量替换某一类字符串 95 实例077 把异常与错误信息显示到窗体中 97 实例078 从...

Magicbox
Global site tag (gtag.js) - Google Analytics