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 相关文章推荐
用javascript动态调整iframe高度的代码
Apr 10 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
jQuery实现美观的多级动画效果菜单代码
Sep 06 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
Apr 18 Javascript
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
通过js实现压缩图片上传功能
Feb 25 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
Jun 02 Javascript
JS sort排序详细使用方法示例解析
Sep 27 Javascript
uni-app 自定义底部导航栏的实现
Dec 11 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 分页类(模仿google)-面试题目解答
2009/09/13 PHP
PHP操作mysql函数详解,mysql和php交互函数
2011/05/19 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
jquery无法设置checkbox选中即没有变成选中状态
2014/03/27 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
jquery常用的12个小功能
2016/07/22 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
浅析vue深复制
2018/01/29 Javascript
vue 实现特定条件下绑定事件
2019/11/09 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
Python中除法使用的注意事项
2014/08/21 Python
python多行字符串拼接使用小括号的方法
2020/03/19 Python
Python二进制串转换为通用字符串的方法
2018/07/23 Python
Python3实现从排序数组中删除重复项算法分析
2019/04/03 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
postman模拟访问具有Session的post请求方法
2019/07/15 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
python time.strptime格式化实例详解
2021/02/03 Python
机械系大学毕业生推荐信
2013/11/27 职场文书
大学应届生的自我评价
2014/03/06 职场文书
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书