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 相关文章推荐
js表头排序实现方法
Jan 16 Javascript
JavaScript返回网页中超链接数量的方法
Apr 03 Javascript
jQuery $.each遍历对象、数组用法实例
Apr 16 Javascript
jQuery复制表单元素附源码分享效果演示
Sep 30 Javascript
js实现继承的5种方式
Dec 01 Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
Feb 20 Javascript
webpack手动配置React开发环境的步骤
Jul 02 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
Sep 05 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
layui的layedit富文本赋值方法
Sep 18 Javascript
Node登录权限验证token验证实现的方法示例
May 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” 彩蛋进行敏感信息获取
2013/08/07 PHP
php+ajax实现图片文件上传功能实例
2014/06/17 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
php数组查找函数总结
2014/11/18 PHP
laravel实现按时间日期进行分组统计方法示例
2019/03/23 PHP
json 定义
2008/06/10 Javascript
jquery 必填项判断表单是否为空的方法
2008/09/14 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
基于jQuery的弹出框插件
2012/03/18 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
Python语法分析之字符串格式化
2019/06/13 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
python二维键值数组生成转json的例子
2019/12/06 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
Mamas & Papas沙特阿拉伯:英国最受欢迎的婴儿品牌
2017/11/20 全球购物
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
爱心倡议书范文
2014/05/12 职场文书
小学数学教研活动总结
2014/07/01 职场文书
2014年中秋节活动总结
2014/08/29 职场文书
公司借条范本
2015/05/25 职场文书
忘记Grafana不要紧2种Grafana重置admin密码方法详细步骤
2022/04/07 Servers
python前后端自定义分页器
2022/04/13 Python
win7配置本地ftp服务器的图文教程
2022/08/05 Servers