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程序设计有所帮助。

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 职场文书