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 相关文章推荐
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
Oct 17 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
Jul 28 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
介绍JavaScript中Math.abs()方法的使用
Jun 14 Javascript
jquery实现动静态条形统计图
Aug 17 Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 Javascript
Bootstrap3 内联单选和多选框
Dec 29 Javascript
谈谈Vue.js——vue-resource全攻略
Jan 16 Javascript
JS实现动态修改table及合并单元格的方法示例
Feb 20 Javascript
Vue框架里使用Swiper的方法示例
Sep 20 Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 Javascript
2019最新21个MySQL高频面试题介绍
Feb 06 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中使用redis
2013/11/04 PHP
php制作动态随机验证码
2015/02/12 PHP
PHP利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
Jquery替换已存在于element上的event的方法
2010/03/09 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
2012/02/03 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
jQuery中可见性过滤器简单用法示例
2018/03/31 jQuery
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
vue实现路由不变的情况下,刷新页面操作示例
2020/02/02 Javascript
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
详解Python中的多线程编程
2015/04/09 Python
bat和python批量重命名文件的实现代码
2016/05/19 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
最经典的商业地产项目广告词
2014/03/13 职场文书
幼儿教师寄语集锦
2014/04/03 职场文书
2014年安全生产责任书
2014/07/22 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书
让人感觉高大上的讲话稿怎么写?
2019/07/08 职场文书
python实现自动化群控的步骤
2021/04/11 Python
Pytest之测试命名规则的使用
2021/04/16 Python
python通配符之glob模块的使用详解
2021/04/24 Python
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python
zabbix如何添加监控主机和自定义监控项
2022/08/14 Servers