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

Extjs EditorGridPanel中ComboBox列的显示问题

Jul 04 Javascript

jquery中文乱码的多种解决方法

Jun 21 Javascript

js将字符串转成正则表达式的实现方法

Nov 13 Javascript

js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)

Mar 14 Javascript

jQuery淡入淡出元素让其效果更为生动

Sep 01 Javascript

jquery实现鼠标滑过小图时显示大图的方法

Jan 14 Javascript

JavaScript判断一个字符串是否包含指定子字符串的方法

Mar 18 Javascript

JS实现仿微博可关闭弹出层效果

Sep 21 Javascript

js倒计时简单实现方法

Dec 17 Javascript

react实现点击选中的li高亮的示例代码

May 24 Javascript

详解Vue中watch对象内属性的方法

Feb 01 Javascript

js实现简单的轮播图效果

Dec 13 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异步执行的常用方式详解

2013/06/03 PHP

php环境无法上传文件的解决方法

2014/04/30 PHP

Smarty缓存机制实例详解【三种缓存方式】

2019/07/20 PHP

JavaScript获取GridView中用户点击控件的行号，列号

2009/04/14 Javascript

javascript一些实用技巧小结

2011/03/18 Javascript

基于jquery的二级联动菜单实现代码

2011/04/25 Javascript

js 可拖动列表实现代码

2011/12/13 Javascript

js 代码优化点滴记录

2012/02/19 Javascript

JavaScript基础语法让人疑惑的地方小结

2012/05/23 Javascript

js创建子窗口并且回传值示例代码

2013/07/02 Javascript

淘宝网提供的国内NPM镜像简介和使用方法

2014/04/17 Javascript

JS响应鼠标点击实现两个滑块区间拖动效果

2015/10/26 Javascript

Javascript中内建函数reduce的应用详解

2016/10/20 Javascript

angular2+nodejs实现图片上传功能

2017/03/27 NodeJs

fullPage.js和CSS3实现全屏滚动效果

2017/05/05 Javascript

详解微信小程序 template添加绑定事件

2017/06/23 Javascript

JavaScript中常见的八个陷阱总结

2017/06/28 Javascript

node文字生成图片的示例代码

2017/10/26 Javascript

vue.js todolist实现代码

2017/10/29 Javascript

vue axios 二次封装的示例代码

2017/12/08 Javascript

vue写一个组件

2018/04/09 Javascript

Vue多组件仓库开发与发布详解

2019/02/28 Javascript

详解VUE前端按钮权限控制

2019/04/26 Javascript

python调用新浪微博API项目实践

2014/07/28 Python

决策树的python实现方法

2014/11/18 Python

django2用iframe标签完成网页内嵌播放b站视频功能

2018/06/20 Python

基于python的Paxos算法实现

2019/07/03 Python

python双端队列原理、实现与使用方法分析

2019/11/27 Python

Python如何将图像音视频等资源文件隐藏在代码中(小技巧)

2020/02/16 Python

利用 Python ElementTree 生成 xml的实例

2020/03/06 Python

python 基于opencv实现图像增强

2020/12/23 Python

凯特·丝蓓英国官网：Kate Spade英国

2016/11/07 全球购物

Joe Fresh官网：加拿大时尚品牌和零售连锁店

2016/11/30 全球购物

优秀驾驶员先进事迹材料

2014/05/04 职场文书

计生办班子群众路线教育实践活动个人对照检查材料思想汇报

2014/10/04 职场文书

如何写好闭幕词

2019/04/02 职场文书