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数组插入一条记录的代码
Aug 30 Javascript
javascript 浏览器检测代码精简版
Mar 04 Javascript
页面使用密码保护代码
Apr 10 Javascript
JavaScript中的连字符详解
Nov 28 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
Sep 28 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
如何用js判断dom是否有存在某class的值
Feb 13 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 Javascript
vue自定义标签和单页面多路由的实现代码
May 03 Javascript
node.js基础知识汇总
Aug 25 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生成的html meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
淘宝搜索框效果实现分析
2011/03/05 Javascript
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
javascript检测两个数组是否相似
2015/05/19 Javascript
jquery背景跟随鼠标滑动导航
2015/11/20 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
2016/05/24 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
浅谈jQuery效果函数
2016/09/16 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
基于vue2的table分页组件实现方法
2017/03/20 Javascript
使用JS编写的随机抽取号码的小程序
2017/08/11 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
python快速排序代码实例
2013/11/21 Python
Python功能键的读取方法
2015/05/28 Python
深入理解Python变量与常量
2016/06/02 Python
基于asyncio 异步协程框架实现收集B站直播弹幕
2016/09/11 Python
教你使用python实现微信每天给女朋友说晚安
2018/03/23 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
2014/11/11 HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
波兰在线杂货店:Polski Koszyk
2019/11/02 全球购物
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
电钳专业个人求职信
2014/01/04 职场文书
给幼儿园老师的表扬信
2014/01/19 职场文书
模具专业求职信
2014/06/26 职场文书
Python3中PyQt5简单实现文件打开及保存
2021/06/10 Python
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang
Python学习之时间包使用教程详解
2022/03/21 Python
Python进程池与进程锁之语法学习
2022/04/11 Python
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android