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 相关文章推荐
永不消失的title提示代码
Feb 15 Javascript
jquery遍历input取得input的name
Apr 27 Javascript
JavaScript 学习小结(适合新手参考)
Jul 30 Javascript
javascript 基础篇2 数据类型,语句,函数
Mar 14 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
Js可拖拽放大的层拖动特效实现方法
Feb 25 Javascript
js鼠标点击图片切换效果实现代码
Nov 19 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
Feb 26 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
利用Vconsole和Fillder进行移动端抓包调试方法
Mar 05 Javascript
javascript实现导航栏分页效果
Jun 27 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实现格式化多行文本为Js可用格式
2015/04/15 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
2017/10/20 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
浅谈Node.js 沙箱环境
2018/05/15 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
浅析Vue实例以及生命周期
2018/08/14 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
使用Python3制作TCP端口扫描器
2017/04/17 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
使用PM2+nginx部署python项目的方法示例
2018/11/07 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
大学生咖啡店创业计划书
2014/01/21 职场文书
《观舞记》教学反思
2014/04/16 职场文书
创先争优宣传标语
2014/10/08 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
初婚初育证明范本
2015/06/18 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
优秀志愿者感言
2015/08/01 职场文书
工作转正自我鉴定范文
2019/06/21 职场文书