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 相关文章推荐
jQuery Div中加载其他页面的实现代码
Feb 27 Javascript
jquery子元素过滤选择器使用示例
Jun 24 Javascript
浅谈JavaScript Math和Number对象
Jan 26 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
Aug 06 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
Dec 21 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
Angular 数据请求的实现方法
May 07 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 Javascript
Vue slot用法(小结)
Oct 22 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 11 Javascript
Vue2.0 ES6语法降级ES5的操作
Oct 30 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
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
PHP把MSSQL数据导入到MYSQL的方法
2014/12/27 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
PHP实现的堆排序算法详解
2017/08/17 PHP
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
JS date对象的减法处理实现代码
2010/12/28 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
Javascript 中的 call 和 apply使用介绍
2012/02/22 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
2016/01/30 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
Angularjs中ng-repeat的简单实例
2017/08/25 Javascript
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
讲解Python中运算符使用时的优先级
2015/05/14 Python
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
Python模拟三级菜单效果
2017/09/11 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
pycharm 激活码及使用方式的详细教程
2020/05/12 Python
Python3 requests模块如何模仿浏览器及代理
2020/06/15 Python
美国第一大药店连锁机构:Walgreens(沃尔格林)
2019/10/10 全球购物
在什么时候需要使用"常引用"
2015/12/31 面试题
如何用JQuery进行表单验证
2013/05/29 面试题
财务会计应届生求职信
2013/11/24 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
团日活动总结书格式
2014/05/08 职场文书
售后客服工作职责
2014/06/16 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
刑事案件上诉状
2015/05/23 职场文书
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL
CSS3实现360度循环旋转功能
2022/02/12 HTML / CSS