编程 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简单实现命名空间效果

Mar 06 Javascript

jQuery多项选项卡的实现思路附样式及代码

Jun 03 Javascript

jQuery实现图片轮播特效代码分享

Sep 15 Javascript

通过BootStrap实现轮播图的实际应用

Sep 26 Javascript

socket.io学习教程之深入学习篇（三）

Apr 29 Javascript

JavaScript 通过Ajax 动态加载CheckBox复选框

Aug 31 Javascript

switchery按钮的使用方法

Dec 18 Javascript

javascript代码优化的8点总结

Jan 29 Javascript

详解在微信小程序的JS脚本中使用Promise来优化函数处理

Mar 06 Javascript

JS面向对象编程实现的拖拽功能案例详解

Mar 03 Javascript

vue-cli设置publicPath小记

Apr 14 Javascript

利用vue3+ts实现管理后台（增删改查）

Oct 30 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 和 MySQL 基础教程（一）

2006/10/09 PHP

如何让thinkphp在模型中自动完成session赋值小教程

2014/09/05 PHP

PHP实现抓取HTTPS内容

2014/12/01 PHP

PHP实现连接设备、通讯和发送命令的方法

2015/10/13 PHP

PHP在linux上执行外部命令的方法

2017/02/06 PHP

php中时间函数date及常用的时间计算

2017/05/12 PHP

jquery多浏览器捕捉回车事件代码

2010/06/22 Javascript

JQuery1.4+ Ajax IE8 内存泄漏问题

2010/10/15 Javascript

jquery获取复选框被选中的值

2014/04/10 Javascript

Node.js中使用mongoskin操作mongoDB实例

2014/09/28 Javascript

javascript的日期对象、数组对象、二维数组使用说明

2014/12/22 Javascript

Position属性之relative用法

2015/12/14 Javascript

JavaScript实现广告弹窗效果

2016/08/09 Javascript

荐书|您有一份JavaScript书单待签收

2017/07/21 Javascript

vue项目打包部署_nginx代理访问方法详解

2018/09/20 Javascript

angular2 组件之间通过service互相传递的实例

2018/09/30 Javascript

node实现简单的增删改查接口实例代码

2019/08/22 Javascript

Node.js 实现抢票小工具 & 短信通知提醒功能

2019/10/22 Javascript

javascript事件循环event loop的简单模型解释与应用分析

2020/03/14 Javascript

JavaScript arguments.callee作用及替换方案详解

2020/09/02 Javascript

Python执行时间的计算方法小结

2017/03/17 Python

Django 添加静态文件的两种实现方法(必看篇)

2017/07/14 Python

Django如何实现内容缓存示例详解

2017/09/24 Python

Python+OpenCV实现图像融合的原理及代码

2018/12/03 Python

Python提取PDF内容的方法(文本、图像、线条等)

2019/09/25 Python

Django框架下静态模板的继承操作示例

2019/11/08 Python

Numpy 理解ndarray对象的示例代码

2020/04/03 Python

10 套华丽的CSS3 按钮小结

2012/10/03 HTML / CSS

HTML5为输入框添加语音输入功能的实现方法

2017/02/06 HTML / CSS

Talbots官网：美国成熟女装品牌

2019/11/15 全球购物

贷款委托书怎么写

2014/08/02 职场文书

2015年元旦演讲稿

2014/09/12 职场文书

2014年局领导班子自身建设情况汇报

2014/11/21 职场文书

订货会邀请函

2015/01/31 职场文书

golang内置函数len的小技巧

2021/07/25 Golang

Redis基本数据类型Set常用操作命令

2022/06/01 Redis