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:以前写的xmlhttp池,代码
May 18 Javascript
关于javascript中的typeof和instanceof介绍
Dec 04 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
Aug 02 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 Javascript
纯javascript判断查询日期是否为有效日期
Aug 24 Javascript
jQuery基于muipicker实现仿ios时间选择
Feb 22 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
vue中子组件的methods中获取到props中的值方法
Aug 27 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 Javascript
详解django模板与vue.js冲突问题
Jul 07 Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 Javascript
vue实现简易音乐播放器
Aug 14 Vue.js
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
重置版宣传动画
2020/04/09 魔兽争霸
PHP4实际应用经验篇(7)
2006/10/09 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
PHP实现二叉树的深度优先与广度优先遍历方法
2015/09/28 PHP
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
Javascript window对象详解
2014/11/12 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
jquery获取下拉框中的循环值
2017/02/08 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
2019/03/12 Javascript
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
Python实现遍历数据库并获取key的值
2015/05/17 Python
Python六大开源框架对比
2015/10/19 Python
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
Python 实现向word(docx)中输出
2020/02/13 Python
python中scrapy处理项目数据的实例分析
2020/11/22 Python
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
Vans(范斯)新西兰官方网站:美国原创极限运动品牌
2020/09/19 全球购物
廉政教育心得体会
2014/01/01 职场文书
女儿十岁生日答谢词
2014/01/27 职场文书
论文指导教师评语
2014/04/28 职场文书
音乐节策划方案
2014/06/09 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
班级管理经验交流材料
2015/11/02 职场文书
《藏戏》教学反思
2016/02/23 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP
纯html+css实现打字效果
2021/08/02 HTML / CSS
oracle delete误删除表数据后如何恢复
2022/06/28 Oracle