编程 Javascript

js实现文本框中输入文字页面中div层同步获取文本框内容的方法

Posted in Javascript onMarch 03, 2015

本文实例讲述了js实现文本框中输入文字页面中div层同步获取文本框内容的方法。分享给大家供大家参考。具体实现方法如下：

<!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>文本框中输入文字，页面中div层同步获取文本框内容</title>

<style>

textarea{width:300px;height:150px; border:1px solid #CCC; font-size:12px; color:#000;}

p{ padding-left:30px; text-indent:-30px;width:270px;height:250px; border:1px solid #900; margin-top:50px; font-size:12px; color:#F00; line-height:21px; overflow:hidden}

</style>

<script type="text/javascript">

 function SwapTxt()

  {

      var txt = document.getElementById("eml").value;

      document.getElementById("lyny").innerHTML=txt;

  }

</script>

</head>

<body>

  <textarea name="" cols="" rows="" class="loe_hk10" id="eml" onkeyup="SwapTxt()"></textarea>

  <p id="lyny">代码家园提示：请在上面的文本框中输入文字，如3water.com</p>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

- Author -

代码家园

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

类似框架的js代码

Nov 09 Javascript

JQUERY操作JSON实例代码

Feb 09 Javascript

获取元素距离浏览器周边的位置的方法getBoundingClientRect

Apr 17 Javascript

JS使用parseInt解析数字实现求和的方法

Aug 05 Javascript

jQuery实现三级菜单的代码

May 09 Javascript

ES6中Proxy代理用法实例浅析

Apr 06 Javascript

基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

Jan 09 Javascript

Vue子组件向父组件通信与父组件调用子组件中的方法

Jun 22 Javascript

如何把vuejs打包出来的文件整合到springboot里

Jul 26 Javascript

详解ES6 Promise的生命周期和创建

Aug 18 Javascript

微信小程序学习总结（三）条件、模板、文件引用实例分析

Jun 04 Javascript

在antd Table中插入可编辑的单元格实例

Oct 28 Javascript

JS实现文字放大效果的方法

Mar 03 #Javascript

jQuery实现的感应鼠标悬停图片色彩渐显效果

Mar 03 #Javascript

js给网页加上背景音乐及选择音效的方法

Mar 03 #Javascript

分享一则JavaScript滚动条插件源码

Mar 03 #Javascript

深入理解JavaScript系列（35）：设计模式之迭代器模式详解

Mar 03 #Javascript

jQuery选择器之基本选择器与层次选择器

Mar 03 #Javascript

JS实现在网页中弹出一个输入框的方法

Mar 03 #Javascript

You might like

PHP开发文件系统实例讲解

2006/10/09 PHP

谈谈新手如何学习PHP

2006/12/14 PHP

PHP 获取远程网页内容的代码(fopen,curl已测)

2011/06/06 PHP

php在程序中将网页生成word文档并提供下载的代码

2012/10/09 PHP

PHP中的按位与和按位或操作示例

2014/01/27 PHP

详解WordPress开发中wp_title()函数的用法

2016/01/07 PHP

PHP文件上传小程序适合初学者学习!

2019/05/23 PHP

初识Node.js

2014/09/03 Javascript

Jquery实现遮罩层的方法

2015/06/08 Javascript

jquery跟随屏幕滚动效果的实现代码

2016/04/13 Javascript

浅析JavaScript中浏览器的兼容问题

2016/04/19 Javascript

JavaScript 数组中最大最小值

2016/06/05 Javascript

layui之select的option叠加问题的解决方法

2018/03/08 Javascript

vue下history模式刷新后404错误解决方法

2018/08/18 Javascript

在微信小程序中渲染HTML内容3种解决方案及分析与问题解决

2020/01/12 Javascript

jQuery实现全选按钮

2021/01/01 jQuery

Python与shell的3种交互方式介绍

2015/04/11 Python

Pycharm学习教程（1）定制外观

2017/05/02 Python

浅谈python常用程序算法

2019/03/22 Python

Python实现将HTML转成PDF的方法分析

2019/05/04 Python

matplotlib基础绘图命令之errorbar的使用

2020/08/13 Python

详解Python高阶函数

2020/08/15 Python

python爬虫实现爬取同一个网站的多页数据的实例讲解

2021/01/18 Python

CSS3圆角边框和边界图片效果实例

2016/07/01 HTML / CSS

Nike墨西哥官网：Nike MX

2020/08/30 全球购物

Java软件工程师综合面试题笔试题

2013/09/08 面试题

大学生专科学习生活的自我评价

2013/12/07 职场文书

安踏广告词改编版

2014/03/21 职场文书

《莫泊桑拜师》教学反思

2014/04/23 职场文书

品质口号大全

2014/06/17 职场文书

环境保护标语

2014/06/20 职场文书

关于读书的演讲稿300字

2014/08/27 职场文书

医院深入开展党的群众路线教育实践活动实施方案

2014/08/27 职场文书

2014年班组建设工作总结

2014/12/01 职场文书

幼儿园毕业致辞

2015/07/29 职场文书

如何做好员工培训计划？

2019/07/09 职场文书