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 相关文章推荐
学习ExtJS 访问容器对象
Oct 07 Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
Mar 01 Javascript
基于jsTree的无限级树JSON数据的转换代码
Jul 27 Javascript
JQuery 应用 JQuery.groupTable.js
Dec 15 Javascript
window.open打开页面居中显示的示例代码
Dec 27 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
JS处理一些简单计算题
Feb 24 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 Javascript
JS forEach跳出循环2种实现方法
Jun 24 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 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
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
php实现将数组转换为XML的方法
2015/03/09 PHP
CodeIgniter自定义控制器MY_Controller用法分析
2016/01/20 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
JS中图片缓冲loading技术的实例代码
2013/08/29 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
jQuery 和 CSS 的文本特效插件集锦
2014/12/12 Javascript
JQuery选择器、过滤器大整理
2015/05/26 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
深入学习jQuery Validate表单验证(二)
2016/01/18 Javascript
EasyUI学习之DataGird分页显示数据
2016/12/29 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
python爬取网页内容转换为PDF文件
2020/07/28 Python
python调用java的jar包方法
2018/12/15 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
Python实现语音识别和语音合成功能
2019/09/20 Python
python使用re模块爬取豆瓣Top250电影
2020/10/20 Python
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
Radley英国官网:英国莱德利小狗包
2019/03/21 全球购物
德国排名第一的主题公园门票网站:Attraction Tickets Direct
2019/09/09 全球购物
Bloomingdale’s阿联酋:选购奢华时尚、美容及更多
2020/09/22 全球购物
医学类个人求职信范文
2014/02/05 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
反四风对照检查材料思想汇报
2014/09/16 职场文书
上课说话检讨书
2015/01/27 职场文书
同事欢送会致辞
2015/07/31 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书