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 相关文章推荐
滚动经典最新话题[prototype框架]下编写
Oct 03 Javascript
在Windows上安装Node.js模块的方法
Sep 25 Javascript
js实现倒计时(距离结束还有)示例代码
Jul 24 Javascript
js/html光标定位的实现代码
Sep 23 Javascript
javascript常用代码段搜集
Dec 04 Javascript
jQuery插件kinMaxShow扩展效果用法实例
May 04 Javascript
JS图片定时翻滚效果实现方法
Jun 21 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
Nov 18 Javascript
Ajax的概述与实现过程
Nov 18 Javascript
Javascript 判断两个IP是否在同一网段实例代码
Nov 28 Javascript
Vue.js常用指令的使用小结
Jun 23 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
May 14 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比较相似字符串的方法
2015/06/05 PHP
yii,CI,yaf框架+smarty模板使用方法
2015/12/29 PHP
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
js显示当前日期时间和星期几
2015/10/22 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
2017/04/11 Javascript
详解vue嵌套路由-params传递参数
2017/05/23 Javascript
基于Bootstrap分页的实例讲解(必看篇)
2017/07/04 Javascript
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
2018/11/05 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
python re的findall和finditer的区别详解
2020/11/15 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
浅谈HTML5新增及移除的元素
2016/06/27 HTML / CSS
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
《秋姑娘的信》教学反思
2014/02/28 职场文书
畜牧兽医本科生的自我评价
2014/03/03 职场文书
自查自纠工作总结
2014/10/15 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书
Python离线安装openpyxl模块的步骤
2021/03/30 Python
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏