编程 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实现下载远程文件并保存在本地的脚本

May 06 Javascript

ppk谈JavaScript style属性

Oct 10 Javascript

一款js和css代码压缩工具[附JAVA环境配置方法]

Apr 16 Javascript

JavaScript prototype属性使用说明

May 13 Javascript

jquery ztree实现下拉树形框使用到了json数据

May 14 Javascript

深入探寻seajs的模块化与加载方式

Apr 14 Javascript

javascript 单例模式详解及简单实例

Feb 14 Javascript

jQuery实现图片滑动效果

Mar 08 Javascript

AngularJS实现动态添加Option的方法

May 17 Javascript

python爬取安居客二手房网站数据(实例讲解)

Oct 19 Javascript

详解Vue SSR（ Vue2 + Koa2 + Webpack4）配置指南

Nov 13 Javascript

ant-design-vue中tree增删改的操作方法

Nov 03 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

ThinkPHP3.1新特性之字段合法性检测详解

2014/06/19 PHP

PHP实现伪静态方法汇总

2016/01/13 PHP

Symfony2在Nginx下的配置方法图文教程

2016/02/04 PHP

php blowfish加密解密算法

2016/07/02 PHP

BOOM vs RR BO5 第一场 2.14

2021/03/10 DOTA

document.onreadystatechange事件的用法分析

2009/10/17 Javascript

Jquery在IE7下无法使用 $.ajax解决方法

2009/11/11 Javascript

jquery 学习之二属性(html()与html(val))

2010/11/25 Javascript

jquery 检测元素是否存在的实例代码

2013/11/19 Javascript

js脚本实现数据去重

2014/11/27 Javascript

JS实现鼠标点击展开或隐藏表格行的方法

2015/03/03 Javascript

js淡入淡出焦点图幻灯片效果代码分享

2015/09/08 Javascript

Jquery日历插件制作简单日历

2015/10/28 Javascript

js事件源window.event.srcElement兼容性写法(详解)

2016/11/25 Javascript

BootStrap数据表格实例代码

2017/09/13 Javascript

webpack proxy 使用(代理的使用)

2020/01/10 Javascript

工作中常用js功能汇总

2020/11/07 Javascript

python 输出上个月的月末日期实例

2018/04/11 Python

pytorch中tensor的合并与截取方法

2018/07/26 Python

使用Python实现从各个子文件夹中复制指定文件的方法

2018/10/25 Python

解决pycharm运行出错,代码正确结果不显示的问题

2018/11/30 Python

python3利用Socket实现通信的方法示例

2019/05/06 Python

Python3之手动创建迭代器的实例代码

2019/05/22 Python

python禁用键鼠与提权代码实例

2019/08/16 Python

python elasticsearch环境搭建详解

2019/09/02 Python

pyinstaller打包找不到文件的问题解决

2020/04/15 Python

使用OpenCV实现人脸图像卡通化的示例代码

2021/01/15 Python

莫斯科绝对前卫最秘密的商店：SVMoscow

2017/10/23 全球购物

大学生素质拓展活动方案

2014/02/11 职场文书

客服部班长工作责任制

2014/02/25 职场文书

跳槽求职信范文

2014/05/26 职场文书

法人任命书范本

2014/06/04 职场文书

学校中秋节活动总结

2015/03/23 职场文书

先进党支部事迹材料2016

2016/02/26 职场文书

关于flex 上下文中自动 margin的问题(完整例子)

2021/05/20 HTML / CSS

Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)

2021/05/24 Python