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


Posted in Javascript onAugust 13, 2015

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

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

运行效果如下图所示:

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>插入节点</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程序设计有所帮助。

Javascript 相关文章推荐
URL编码转换,escape() encodeURI() encodeURIComponent()
Dec 27 Javascript
jQuery进行组件开发完整实例
Dec 15 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
js 定义对象数组(结合)多维数组方法
Jul 27 Javascript
js 原型对象和原型链理解
Feb 09 Javascript
详解vue slot插槽的使用方法
Jun 13 Javascript
React 源码中的依赖注入方法
Nov 07 Javascript
浅谈ECMAScript 中的Array类型
Jun 10 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 #Javascript
js实现仿Discuz文本框弹出层效果
Aug 13 #Javascript
深入学习JavaScript中的原型prototype
Aug 13 #Javascript
javascript获取本机操作系统类型的方法
Aug 13 #Javascript
javascript中offset、client、scroll的属性总结
Aug 13 #Javascript
用JavaScript实现PHP的urlencode与urldecode函数
Aug 13 #Javascript
asp.net中oracle 存储过程(图文)
Aug 12 #Javascript
You might like
PHP insert语法详解
2008/06/07 PHP
PHP MSSQL 存储过程的方法
2008/12/24 PHP
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
js 发个判断字符串是否为符合标准的函数
2009/04/27 Javascript
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
jquery插件jTimer(jquery定时器)使用方法
2013/12/23 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
JavaScript模板引擎用法实例
2015/07/10 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
jQuery判断checkbox选中状态
2016/05/12 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
JavaScript实现省市县三级级联特效
2017/05/16 Javascript
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
JavaScript实现HTML导航栏下拉菜单
2020/11/25 Javascript
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
机器学习的框架偏向于Python的13个原因
2017/12/07 Python
Python 类的特殊成员解析
2018/06/20 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
django xadmin 管理器常用显示设置方式
2020/03/11 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
如何用python处理excel表格
2020/06/09 Python
英国最大的百货公司:Harrods
2016/08/18 全球购物
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
JAVA中的关键字有什么特点
2014/03/07 面试题
电脑售后服务承诺书
2014/03/27 职场文书
工作年限证明范本
2015/06/15 职场文书