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 相关文章推荐
获取当前网页document.url location.href区别总结
May 10 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
Jul 20 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
jQuery+css实现的切换图片功能代码
Jan 27 Javascript
拥Bootstrap入怀——导航栏篇
May 30 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
MVVM框架下实现分页功能示例
Jun 14 Javascript
小程序中this.setData的使用和注意事项
Aug 28 Javascript
Vue使用screenfull实现全屏效果
Sep 17 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
无线电波是什么?它是怎样传输的?
2021/03/01 无线电
php生成文件
2007/01/15 PHP
给WordPress中的留言加上楼层号的PHP代码实例
2015/12/14 PHP
自制PHP框架之路由与控制器
2017/05/07 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
Laravel框架实现多数据库连接操作详解
2019/07/12 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
js加减乘除丢失精度问题解决方法
2014/05/16 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
解析js如何获取css样式
2016/12/11 Javascript
vue.js获取数据库数据实例代码
2017/05/26 Javascript
浅谈vuex 闲置状态重置方案
2018/01/04 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
Angular 项目实现国际化的方法
2018/01/08 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
2018/12/13 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
python检测服务器是否正常
2014/02/16 Python
Python新手实现2048小游戏
2015/03/31 Python
发布你的Python模块详解
2016/09/15 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
萌新HTML5 入门指南(二)
2020/11/09 HTML / CSS
高分子材料与工程专业个人求职信
2013/12/15 职场文书
大学生学年自我鉴定
2014/02/10 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
护理专业自我评价
2015/03/11 职场文书