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实例教程(19) 使用HoTMetal(5)
Dec 23 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
JQuery遍历元素的父辈和祖先的方法
Sep 18 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
基于js 本地存储(详解)
Aug 16 Javascript
javascript实现计算指定范围内的质数示例
Dec 29 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
Nov 01 Javascript
原生JS实现烟花效果
Mar 10 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 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
打造计数器DIY三步曲(下)
2006/10/09 PHP
php smarty模版引擎中变量操作符及使用方法
2009/12/11 PHP
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
基于PHP array数组的教程详解
2013/06/05 PHP
PHP添加Xdebug扩展的方法
2014/02/12 PHP
php function用法如何递归及return和echo区别
2014/03/07 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
Javascript UrlDecode函数代码
2010/01/09 Javascript
jQuery之$(document).ready()使用介绍
2012/04/05 Javascript
input禁止键盘及中文输入,但可以点击
2014/02/13 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
jQuery实现简单的tab标签页效果
2016/09/12 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
Nodejs下用submit提交表单提示cannot post错误的解决方法
2016/11/21 NodeJs
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
JavaScript canvas绘制折线图
2020/02/18 Javascript
python编码最佳实践之总结
2016/02/14 Python
python获取多线程及子线程的返回值
2017/11/15 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
Django vue前后端分离整合过程解析
2020/11/20 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
2014/07/02 HTML / CSS
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
英国女性运动服品牌:Sweaty Betty
2018/11/08 全球购物
土木工程师岗位职责
2013/11/24 职场文书
中专生自我鉴定范文
2013/12/19 职场文书
主要领导对照检查材料
2014/08/26 职场文书
法定授权委托证明书
2014/09/27 职场文书
新闻稿怎么写
2015/07/18 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书
解决xampp安装后Apache无法启动
2022/03/21 Servers