js实现文本框中输入文字页面中div层同步获取文本框内容的方法

 这篇文章主要介绍了js实现文本框中输入文字页面中div层同步获取文本框内容的方法,实例分析了javascript操作dom元素的技巧,需要的朋友可以参考下

 
 

本文实例讲述了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">代码家园提示:请在上面的文本框中输入文字,如www.jb51.net</p>
</body>
</html>

 

希望本文所述对大家的javascript程序设计有所帮助。

时间: 2024-08-26 07:44:38

js实现文本框中输入文字页面中div层同步获取文本框内容的方法的相关文章

javascript文本框内输入文字倒计数的方法_javascript技巧

本文实例讲述了javascript文本框内输入文字倒计数的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>文本框内输入文字倒计数效果</title> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin maxLen = 100; //定义用户可以输入的最多字数 function checkMaxInput(obj) { if

Android中实现在矩形框中输入文字显示剩余字数的功能

虽然这两个功能都比较简单,但是在实际app开发中真的很常见,特别是显示字数或剩余字数这个功能 如下图: 要实现上面的功能,需要做到三点: 1.实现矩形框布局 思路就是矩形框作为整个布局的一个background,在drawable中创建一个shap.xml样式文件 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/

Focusky在插入的图形中输入文字

  Focusky在插入的图形中输入文字: 1. 在快捷工具栏点击"插入"-> "图形"->接着插入图形 2. 插入图形后,在右侧的编辑工具中点击 "添加文本"图标,便可添加文字到图形中; 3. 添加文字后便可自定义文字设置,字体,大小,颜色等.

win8.1系统在程序或软件中输入文字变成问号怎么解决?

    win8.1系统在程序或软件中输入文字变成问号怎么解决?: 1.点击控制面板,然后将除自己使用的中文输入之外的其他语言.输入法等先全部删除; 2.然后再试一下,如果可以输入中文了,可适当添加一下"英语(美国)"即可. windows7教程 windows8教程 windows10教程

Word文档中输入文字后后面的文字消失了什么原因?

  我们在修改Word文档的时候,有时会遇到输入文字后后面的文字消失了,是什么原因呢?下面小编就为大家介绍一下,来看看吧! 步骤 打开Word,我们在文档中输入百度经验 在百度之间在插入百度经验四个字看一下效果 原因还很简单,输入不进入是因为目前的输入方式为改写模式,只要将改写模式改为插入模式就可以了 单击改写模式会直接转到插入模式 在此输入百度经验看一下效果 还有一种比较简单的操作,就是打开Word文档,按键盘上的insert键 以上就是Word文档中输入文字后后面的文字消失的解决方法介绍,操

Word表格中输入文字列宽发生变化

  Word在创建了文档后,然后插入了表格,当在表格中输入文字的时候,表格宽度会随着文字变化. 在Word中表格的宽度会根据文字的大小进行自动调节尺寸.如果在表格中输入的文字超过了列宽,就会自动进行调整列宽的尺寸.如果不需要自动调整,可以根据以下方法进行设置. 1.选中表格后,再选择"表格"→"表格属性". 2.选择"表格"选项,然后单击"选项",在"表格选项"中,将"自动重调尺寸以适应内容&qu

win7系统在word中输入文字会自动被覆盖怎么回事

  win7系统在word中输入文字会自动被覆盖怎么回事?办公中经常使用word文档编辑编辑和排版,win7系统电脑安装word文档后,在word中输入文字,不知道哦啊怎么回事,打出来的字会总被覆盖了,或者被后面的字吃掉,有时候在word文档中复制也会遇到这样的情况.刚刚开始已经是缓存反应慢的问题,但是后来才知道文字时被覆盖不见了,怎么办呢?下面小编介绍几种解决方法,大家可参考下. 方法一: 1.这种问题一般是由于word的改写模式导致.先打开WORD软件; 2.观察右下角的"改写"是

ASP.NET MVC中的cshtml页面中的下拉框的使用

ASP.NET MVC中的cshtml页面中的下拉框的使用 用上@Html.DropDownList 先记下来..以做备忘...

asp.net-没有数据库,直接从文件夹中读取显示页面中图片,可以实现点击图片就给他从页面和文件夹中删除吗

问题描述 没有数据库,直接从文件夹中读取显示页面中图片,可以实现点击图片就给他从页面和文件夹中删除吗 这个是显示的具体代码,前台页面就设置了个div id='img'显示到这里的,但是我想了好久不知道怎么实现删除了 解决方案 可以啊,html中,加上图片名称或路径,点击时调用后台接口,接口去删除服务器上的实际图片 解决方案二: 点击时,把连接传给后台接口,通过ajax,后台成功后返回,你在remove掉这个img元素