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 相关文章推荐
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 Javascript
node.js中的fs.fsyncSync方法使用说明
Dec 15 Javascript
JavaScript中Function详解
Feb 27 Javascript
在Mac OS下使用Node.js的简单教程
Jun 24 Javascript
javascript+html5实现绘制圆环的方法
Jul 28 Javascript
javascript实现下雪效果【实例代码】
May 03 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
学习Node.js模块机制
Oct 17 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
微信小程序自定义组件
Aug 16 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
如何基于JavaScript判断图片是否加载完成
Dec 28 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读注册表
2006/10/09 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
2020/03/02 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
javascript replace方法与正则表达式
2008/02/19 Javascript
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
使用javascipt---实现二分查找法
2013/04/10 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
2015/04/12 Javascript
js实现仿阿里巴巴城市选择框效果实例
2015/06/24 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
基于jQuery实现左右图片轮播(原理通用)
2015/12/24 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
2016/12/12 Javascript
实例讲解Vue.js中router传参
2018/04/22 Javascript
mockjs+vue页面直接展示数据的方法
2018/12/19 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
python 文件与目录操作
2008/12/24 Python
python实现的简单文本类游戏实例
2015/04/28 Python
20招让你的Python飞起来!
2016/09/27 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
美国著名童装品牌:OshKosh B’gosh
2016/08/05 全球购物
拉丁舞学习者的自我评价
2013/10/27 职场文书
优秀志愿者事迹材料
2014/02/03 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
银行实习推荐信
2015/03/27 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
2019同学聚会主持词
2019/05/06 职场文书
golang 在windows中设置环境变量的操作
2021/04/29 Golang
分享一些Java的常用工具
2021/06/11 Java/Android
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android