将input框中输入内容显示在相应的div中【三种方法可选】

例题一枚：在input框中输入内容，会相应的显示在下面的div中的不同做法：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.css" rel="external nofollow" />
 <style type="text/css">
 #div{
 width: 175px;
 height: 100px;
 margin: 20px 84px;
 border:2px solid green;
 }
 </style>
 </head>
 <body>
 <div class="container">
 请输入内容：<input type="text" id="put" />
 <div id="div" ></div>
 </div>
 </body>
<script src="js/jquery-3.1.1.js"></script>
<script src="js/bootstrap.js"></script>

js：原生DOM操作

<script type="text/javascript">
var put1=document.getElementById("put");
 var div1=document.getElementById("div");
 put1.onkeyup=function(){
 div1.innerText=put1.value;
 }
</script>

指点迷津：

getElementById获取DOM节点，innerHTML:设置或者获取节点内部的所有HTML代码；

这里需要注意获取到input里面的节点内容需要获取value值。

这里使用的是innerHTML属性和value属性，注意与JQ中的方法区分

JQ操作：

<script src="js/angular.js"></script>
<script type="text/javascript">
$("#put").keyup(function(){
 $("#div").html($("#put").val())
 });
</script>

指点迷津：

jQuery("选择器").action ();通过选择器调用事件函数，但JQuery中，JQuery可以用$代替，即$("选择器").action();

>>选择器可以直接使用CSS选择器，选中元素;

>>.action表示对元素执行的操作;这里使用keyup（）事件操作，与JS的不同之处在于html（），val()这里均是方法，在JS中则是属性

AngularJs操作：

<body ng-app="">
 <div class="container">
 请输入内容：<input type="text" ng-model="name"/>
 <div ng-bind="name"></div>
<!--<div id="div" >{{name}}</div>-->
 </div>
 </body>

指点迷津：

1.ng-app：ng-app=""声明Angular所管辖的范围，一般写在body和HTML上，原则上一个页面只能有一个

<body ng-app=""></body>

2.ng-model ：把元素值（指令把输入域的值）绑定到应用程序变量 name。

<input type="text"  ng-model="name"/>

3.ng-bind： 指令把应用程序变量 name 绑定到某个段落的 innerHTML。可用表达式替代

<div ng-bind=“name”></div>

<div>{{name}}</div>弹网页加载的瞬间会看到{}，可以用ng-bind替代

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • jquery 实现input输入什么div图层显示什么

    复制代码 代码如下: <html> <meta charset="utf-8" /> <style > .ppp{ width:600px; height:300px; background-color:pink; } </style> <input type="text" id="ttt" name="" value="" maxlength=&quo

  • 将input框中输入内容显示在相应的div中【三种方法可选】

    将input框中输入内容显示在相应的div中【三种方法可选】

    例题一枚:在input框中输入内容,会相应的显示在下面的div中的不同做法: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css" rel=

  • 在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码

    如何在第一input内输入内容.textarea自动得到第一个文件框的值;      也就是说第一个input边输入textarea边得值      谢谢 <input   type=text   name="mytxt"   onkeyup="myTxta.value=this.value">      <textarea   name='myTxta'>      </textarea> <input   type=&q

  • VS中C#读取app.config数据库配置字符串的三种方法

    关于VS2008或VS2005中数据库配置字符串的三种取法 VS2008建立Form程序时,如果添加数据源会在配置文件 app.config中自动写入连接字符串,这个字符串将会在你利用DataSet,SqlDataAparter,SqlConnection等控件时如影随行地提示你让去选择,或者是新建字符串.如果要用代码的方式取得这个字符串则有三种方式: app.config内容: <?xml version="1.0" encoding="utf-8" ?&g

  • C#、.Net中把字符串(String)格式转换为DateTime类型的三种方法

    方式一:Convert.ToDateTime(string) 复制代码 代码如下: Convert.ToDateTime(string) 注意:string格式有要求,必须是yyyy-MM-dd hh:mm:ss 方式二:Convert.ToDateTime(string, IFormatProvider) 复制代码 代码如下: DateTimeFormatInfo dtFormat = new System.GlobalizationDateTimeFormatInfo(); dtFormat

  • 详解elementUI中input框无法输入的问题

    最近发现别人项目中在输入密码的时候发现input框无法输入进去 键盘都快敲坏了还是无法输入 通过各种排查.还是无法解决这个问题 后面无意中发现 elementUI中@input事件可以拿到当前的输入的值 问题找到了 视图没有更新的问题 那么怎么解决了 刷新通过this.$forceUpdate() 可以解决这个问题 这样的话这个问题就解决了 原因可能是由于组件嵌套太深(不是很了解为啥出现这个问题有没有大神解释一波 ) 到此这篇关于详解elementUI中input框无法输入的问题的文章就介绍到这

  • Input文本框随着输入内容多少自动延伸的实现

    实例如下: <!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="Co

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

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

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

  • jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法

    本文实例讲述了jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法.分享给大家供大家参考,具体如下: JS鼠标双击事件 onDblClick <td width="10%" title="双击修改" ondblclick="ShowElement(this,<%#Eval("id") %> </td> 这里的本人用绑定的值是传的当前行对应的ID号 function ShowEle

  • 文本框根据输入内容自适应高度的代码

    其实现代浏览器大多都支持文本框尺寸调节功能,绝大多数情况下却没有自动适应来得爽快,在网络上发现一方法比较简单的实现文本框高度自适应,于是封装了这个函数,准备以后应用到项目中. 源代码: 23:03文章更新: 感谢alucelx同学再次给力的帮助,大大简化了方法,更新代码为0.2版本,同时解决了兼容Opera浏览器,至此全兼容IE6+与现代浏览器! 在线演示: http://demo.jb51.net/js/2011/autoArea/index.htmautoTextarea.js 复制代码 代

  • 正则表达式解决input框固定输入值得格式(金额,特殊字符)

    在写输入用到input的时候,经常出现以下几种情况: 只能输入某.栗子:只能输入数字,只能输入字母(大写,小写)只能输入某固定格式.栗子:只能输入金额,只能输入小数且最多保留2位不能输入某.栗子:不能输入特殊字符,如"@#￥%&*"等 这种情况下,就需要直接在input上进行限制,在前端的应用中主要是用正则表达式来解决这些问题的 第一种情况:只能输入某 <template> <div id="app"> {{value}} <e

随机推荐