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动态添加及删除页面节点元素示例代码
Jun 16 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
JavaScript取得WEB安全颜色列表的方法
Jul 14 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
javascript 通过键名获取键盘的keyCode方法
Dec 31 Javascript
vue使用自定义icon图标的方法
May 14 Javascript
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
react同构实践之实现自己的同构模板
Mar 13 Javascript
Vue项目中配置pug解析支持
May 10 Javascript
详解如何探测小程序返回到webview页面
May 14 Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 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数组最大值,最小值的代码
2011/10/31 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
PHP微信H5支付开发实例
2018/07/25 PHP
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
2016/07/24 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
Angular2实现组件交互的方法分析
2017/12/19 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
解决windows下Sublime Text 2 运行 PyQt 不显示的方法分享
2014/06/18 Python
Python列出一个文件夹及其子目录的所有文件
2016/06/30 Python
Python中取整的几种方法小结
2017/01/06 Python
python中子类调用父类函数的方法示例
2017/08/18 Python
python如何查看微信消息撤回
2018/11/27 Python
python3 反射的四种基本方法解析
2019/08/26 Python
python科学计算之narray对象用法
2019/11/25 Python
Python 音频生成器的实现示例
2019/12/24 Python
python实现简单遗传算法
2020/09/18 Python
基于python的opencv图像处理实现对斑马线的检测示例
2020/11/29 Python
python定义具名元组实例操作
2021/02/28 Python
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/01/13 面试题
个人教师自我评价范文
2013/12/02 职场文书
优秀的毕业生的自我评价
2013/12/12 职场文书
财务管理职业生涯规划范文
2013/12/27 职场文书
《这儿真好》教学反思
2014/02/22 职场文书
教学评估实施方案
2014/03/16 职场文书
黄金搭档广告词
2014/03/21 职场文书
毕业论文指导老师意见
2015/06/04 职场文书