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

如何取得中文输入的真实长度？

Jun 24 Javascript

jQuery 隔行换色支持键盘上下键，按Enter选定值

Aug 02 Javascript

什么是JavaScript

Aug 13 Javascript

基于jquery的修改当前TAB显示标题的代码

Dec 11 Javascript

纯JS实现五子棋游戏兼容各浏览器(附源码)

Apr 24 Javascript

js(jQuery)获取时间的方法及常用时间类搜集

Oct 23 Javascript

全面解析Bootstrap排版使用方法（文字样式）

Nov 30 Javascript

jQuery选择器之属性过滤选择器详解

Sep 28 jQuery

antd Upload 文件上传的示例代码

Dec 14 Javascript

JS实现轮播图效果

Jan 11 Javascript

小程序自定义导航栏兼容适配所有机型（附完整案例）

Apr 26 Javascript

40行代码把Vue3的响应式集成进React做状态管理

May 20 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 8小时时间差的解决方法小结

2009/12/22 PHP

用php实现百度网盘图片直链的代码分享

2012/11/01 PHP

修改ThinkPHP缓存为Memcache的方法

2014/06/25 PHP

thinkphp3.2.2实现生成多张缩略图的方法

2014/12/19 PHP

Yii实现自动加载类地图的方法

2015/04/01 PHP

jQuery后代选择器用法实例

2014/12/23 Javascript

使用jQuery获得内容以及内容的属性

2015/02/26 Javascript

javascript 判断页面访问方式电脑或者移动端

2016/09/19 Javascript

使用PBFunc在Powerbuilder中支付宝当面付款功能

2016/10/01 Javascript

Jquery UI实现一次拖拽多个选中的元素操作

2020/12/01 Javascript

AngularJS过滤器filter用法分析

2016/12/11 Javascript

js实现图片轮播效果学习笔记

2017/07/26 Javascript

微信小程序的日期选择器的实例详解

2017/09/29 Javascript

JS二分查找算法详解

2017/11/01 Javascript

AngularJS遍历获取数组元素的方法示例

2017/11/11 Javascript

Java设计中的Builder模式的介绍

2018/03/22 Javascript

浅析JS中回调函数及用法

2018/07/25 Javascript

使用NestJS开发Node.js应用的方法

2018/12/03 Javascript

微信小程序实现pdf、word等格式文件上传的方法

2019/09/10 Javascript

vue内置组件keep-alive事件动态缓存实例

2020/10/30 Javascript

[51:27]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.16

2019/08/19 DOTA

Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)

2018/02/21 Python

python爬虫之线程池和进程池功能与用法详解

2018/08/02 Python

Python实现通过解析域名获取ip地址的方法分析

2019/05/17 Python

利用scikitlearn画ROC曲线实例

2020/07/02 Python

Python爬虫入门教程02之笔趣阁小说爬取

2021/01/24 Python

html table呈现个人简历以及单元格宽度失效的问题解决

2021/01/22 HTML / CSS

女士鞋子、包包和服装在线，第一款10美元：ShoeDazzle

2019/07/26 全球购物

智能家居、吸尘器、滑板车、电动自行车网上购物：Geekmaxi

2021/01/18 全球购物

解决python 输出到csv 出现多空行的情况

2021/03/24 Python

夜班门卫岗位职责

2013/12/09 职场文书

小学敬老月活动方案

2014/02/11 职场文书

科技之星事迹材料

2014/06/02 职场文书

公司新人试用期自我评价

2014/09/17 职场文书

2015年教研组工作总结

2015/05/04 职场文书

2015年母亲节活动策划方案

2015/05/04 职场文书