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 相关文章推荐
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
javascript 三种编解码方式
Feb 01 Javascript
JavaScript中的null和undefined解析
Apr 14 Javascript
jQuery on()方法使用技巧详解
Apr 16 Javascript
JQuery中ajax方法访问web服务实例
Jul 18 Javascript
JavaScript html5 canvas绘制时钟效果(二)
Mar 27 Javascript
jquery radio的取值_radio的选中_radio的重置方法
Sep 20 Javascript
web前端开发upload上传头像js示例代码
Oct 22 Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 Javascript
使用layui的layer组件做弹出层的例子
Sep 27 Javascript
JavaScript提升机制Hoisting详解
Oct 23 Javascript
在vue项目中 实现定义全局变量 全局函数操作
Oct 26 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使用function_exists判断函数可用的方法
2014/11/19 PHP
Laravel学习教程之从入口到输出过程详解
2017/08/27 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
phpwind放自动注册方法
2006/12/02 Javascript
slice函数的用法 之不错的应用
2006/12/29 Javascript
jquery validate使用攻略 第四步
2010/07/01 Javascript
jquery 选项卡效果 新手代码
2011/07/08 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
全面了解构造函数继承关键apply call
2016/07/26 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
Popup弹出框添加数据实现方法
2017/10/27 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
JS使用正则表达式提交页面验证的代码
2019/10/16 Javascript
python实现从字典中删除元素的方法
2015/05/04 Python
Python爬虫实现(伪)球迷速成
2018/06/10 Python
python退出命令是什么?详解python退出方法
2018/12/10 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
Python 中的 global 标识对变量作用域的影响
2019/08/12 Python
Django数据库操作之save与update的使用
2020/04/01 Python
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
Java的基础面试题附答案
2016/01/10 面试题
服务员岗位责任制
2014/02/11 职场文书
企业法人授权委托书
2014/09/25 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
文明单位申报材料
2014/12/23 职场文书
绿里奇迹观后感
2015/06/15 职场文书
浅谈Python numpy创建空数组的问题
2021/05/25 Python
python中的sys模块和os模块
2022/03/20 Python
聊聊配置 Nginx 访问与错误日志的问题
2022/05/25 Servers