JavaScript实现将文本框的值插入指定位置的方法

本文实例讲述了JavaScript实现将文本框的值插入指定位置的方法。分享给大家供大家参考。具体如下：

这里实现JavaScript将文本框的值插入当前面指定位置，这在一些表单提交场合或许我们都用到过，本代码段是将文本框的值写入到当前页的body区域内，如果你设置有其它的文本框，则可以值赋给这些文本框，可以让使用表单的用户免去输入的麻烦。

运行效果如下图所示：

具体代码如下：

<!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>插入节点</title>
<script language="javascript">
 <!--
  function crNode(str)
  {
   var newP=document.createElement("p");
   var newTxt=document.createTextNode(str);
   newP.appendChild(newTxt);
   return newP;
  }
  function insetNode(nodeId,str)
  {
   var node=document.getElementById(nodeId);
   var newNode=crNode(str);
   if(node.parentNode)//判断是否拥有父节点
   node.parentNode.insertBefore(newNode,node);
  }
 -->
</script>
</head>
<body>
 <h2 id="h">在上面插入节点</h2>
 <form id="frm" name="frm">
 输入文本：<input type="text" name="txt" />
 <input type="button" value="前插入" onclick="insetNode('h',document.frm.txt.value);" />
 </form>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • JavaScript talbe表中指定位置插入一行的实现代码 脚本之家修正版

    JavaScript talbe表中指定位置插入一行的实现代码 脚本之家修正版

    最近在学JavaScript,下面是我自己做的一个例子(在w3cschool例子的基础上) 该例子实现功能是在鼠标点击的行之后插入一行,默认是在第一行插入.插入的内容可以自己输入,代码如下 //global var var pos =0 //to find the position you mouse has pressed function whichElement(e) { var targ if (!e) var e = window.event if (e.target) targ =

  • javascript在一段文字中的光标处插入其他文字

    例如:一个文本框里有一段文字,我要通过点击鼠标并且在相应的地方插入文本 我是这样做的:先获得文本框的值TextArea.Value,然后.TextArea.Value+其他文本 <script type="text/javascript">    function setCaret(textObj){     if(textObj.createTextRange){         textObj.caretPos=document.selection.createRang

  • javascript实现 在光标处插入指定内容

    <TEXTAREA ROWS="20" COLS="100" id='test'>123456798<B>123</B></TEXTAREA> <INPUT TYPE="button" value='insert("abc")' OnClick='_insertText("abc")'> <SCRIPT LANGUAGE="Java

  • JavaScript插入动态样式实现代码

    与动态脚本类似,所谓动态样式是指在页面刚加载时不存在的样式:动态样式是在页面加载完成后动态添加到页面中. 我们以下面这个典型的<link>元素为例: <link rel="stylesheet" type="text/css" href="style.css">使用DOM代码可以很容易的动态创建出这个元素: 复制代码 代码如下: var link = document.createElement("link&qu

  • JavaScript数组前面插入元素的方法

    本文实例讲述了JavaScript数组前面插入元素的方法.分享给大家供大家参考.具体如下: JS数组带有一个unshift方法可以再数组前面添加若干个元素,下面是详细的代码演示 复制代码 代码如下: <!DOCTYPE html> <html> <body> <p id="demo">Click the button to add elements to the array.</p> <button onclick=&q

  • javascript算法学习(直接插入排序)

    1.基本思想 假设待排序的记录存放在数组R[1..n]中.初始时,R[1]自成1个有序区,无序区为R[2..n].从i=2起直至i=n为止,依次将R[i]插入当前的有序区R[1..i-1]中,生成含n个记录的有序区. 复制代码 代码如下: <!doctype html> <html> <head><title>javascript直接插入排序</title> <meta charset = "utf-8" /> &

  • JavaScript实现的类字典插入或更新方法实例

    本文实例讲述了JavaScript实现的类字典插入或更新方法.分享给大家供大家参考.具体如下: 代码表述了类字典插入或更新的相关思想,感兴趣的朋友主要看懂代码意思就行,不必过于深究 <script type="text/javascript"> function insertOrUpdate(array, keyName, keyVal, fieldNames, fieldVals) { var hasExist = false; var len = array.lengt

  • JavaScript 点击插入文字

    JavaScript点击插入文字 我们提示,在这段文字的任意处点击会插入几个规定的字符,不信试试看~ 插入的文字"); } } //--> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JavaScript字符串插入、删除、替换函数使用示例

    说明: 以下函数中前两个函数取出查找字符串的前一部分和后一部分,以用于其他函数.注意,调用一次 replaceString(mainStr,searchStr,replaceStr) 函数,只能将字符串 mainStr 中最先找到的一个 searchStr 字符串替换为 replaceStr 字符串,并不能将字符串 mainStr 中所有的 searchStr 字符串替换为 replaceStr 字符串,如果需要替换全部,则需要使用循环. 函数源码: [code//提取查找字符串前面所有的字符 

  • 深入理解javascript动态插入技术

    深入理解javascript动态插入技术

    最近发现各大类库都能利用div.innerHTML=HTML片断来生成节点元素,再把它们插入到目标元素的各个位置上.这东西实际上就是insertAdjacentHTML,但是IE可恶的innerHTML把这优势变成劣势.首先innerHTML会把里面的某些位置的空白去掉,见下面运行框的结果: 复制代码 代码如下: <!doctype html><html dir="ltr" lang="zh-CN">    <head>     

随机推荐