编程 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 相关文章推荐

理解JavaScript中的对象推荐

Jan 09 Javascript

JS获取图片实际宽高及根据图片大小进行自适应

Aug 11 Javascript

JavaScript将Web页面内容导出到Word及Excel的方法

Feb 13 Javascript

jquery带动画效果幻灯片特效代码

Aug 27 Javascript

js多功能分页组件layPage使用方法详解

May 19 Javascript

浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别

Aug 18 Javascript

JavaScript实现各种排序的代码详解

Aug 28 Javascript

BootStrap Table实现server分页序号连续显示功能（当前页从上一页的结束序号开始）

Sep 12 Javascript

Vue.js实现大转盘抽奖总结及实现思路

Oct 09 Javascript

Vue自定义指令结合阿里云OSS优化图片的实现方法

Nov 12 Javascript

vue页面更新patch的实现示例

Mar 25 Javascript

原生JavaScript实现购物车

Jan 10 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采用自定义函数实现遍历目录下所有文件的方法

2014/08/19 PHP

PHP实现的DES加密解密封装类完整实例

2017/04/29 PHP

PHP长连接实现与使用方法详解

2018/02/11 PHP

PHP中16个高危函数整理

2019/09/19 PHP

jQuery生成asp.net服务器控件的代码

2010/02/04 Javascript

纯JS实现的批量图片预览加载功能

2011/08/14 Javascript

js 实现css风格选择器（压缩后2KB）

2012/01/12 Javascript

javascript中使用正则计算中文长度的例子

2014/04/29 Javascript

JS实现的表格行鼠标点击高亮效果代码

2015/11/27 Javascript

JavaScript实现时间倒计时跳转(推荐)

2016/06/28 Javascript

使用OPENLAYERS3实现点选的方法

2020/09/24 Javascript

详解ajax的data参数错误导致页面崩溃

2018/04/30 Javascript

javascript闭包的使用之按钮切换功能

2018/08/30 Javascript

解决vue项目router切换太慢问题

2020/07/19 Javascript

jQuery实现简单评论功能

2020/08/19 jQuery

[03:59]5分钟带你了解什么是DOTA2（第二期）

2017/02/07 DOTA

Python读取环境变量的方法和自定义类分享

2014/11/22 Python

Python中编写ORM框架的入门指引

2015/04/29 Python

python统计文本文件内单词数量的方法

2015/05/30 Python

python爬虫请求头设置代码

2020/07/28 Python

PyCharm vs VSCode，作为python开发者，你更倾向哪种IDE呢？

2020/08/17 Python

分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功

2020/11/20 Python

BeautifulSoup中find和find_all的使用详解

2020/12/07 Python

韩国三星集团旗下时尚品牌官网：SSF SHOP

2016/08/02 全球购物

会计电算化专业毕业生推荐信

2013/12/24 职场文书

数控机械专业个人的自我评价

2014/01/02 职场文书

西式婚礼证婚词

2014/01/12 职场文书

委托公证书范本

2014/04/03 职场文书

2015年三八妇女节活动总结

2015/02/06 职场文书

财务个人年度总结范文

2015/02/26 职场文书

2016入党积极分子党课学习心得体会

2015/10/09 职场文书

2016年清明节网上祭英烈活动总结

2016/04/01 职场文书

mysql数据库入门第一步之创建表

2021/05/14 MySQL

pytorch 6 batch_train 批训练操作

2021/05/28 Python

一文简单了解MySQL前缀索引

2022/04/03 MySQL

React四级菜单的实现

2022/04/08 Javascript