js如何实时输出textarea输入框值的变化

在js中,可以通过onkeyUp事件来监听textarea输入框值的变化。下面小编举例讲解js如何实时输出textarea输入框值的变化。

e4b5e2f5ee0d3ace6bd568dd87e265e7340fbb58.jpg?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1

东西/原料

  • js+html
  • 代码编纂器:zend studio 10.0

方式/步调

  1. 1

    新建一个html文件,定名为test.html,用于讲解js如何及时输出textarea输入框值的转变。

    906dbbcadce89048e8fe6d41130e5f2043719258.jpg?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1
  2. 2

    在test.html文件中,利用textarea标签建立文本域,同时利用p标签建立一块区域,用于输出监听的内容。

    dda98e4800fc77f7720c4596c8715fdb36209058.jpg?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1
  3. 3

    在test.html文件中,设置textarea标签的id为mytt,用于获得textarea对象。

    91091efc77f7980eb42259c7d4db3620b93a9158.jpg?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1
  4. 4

    在test.html文件中,给textarea绑定onkeyUp事务,当textarea输入内容时,执行ttIng()函数。

    01bd69f7980e5f20af73456dbd20b93acd898e58.jpg?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1
  5. 5

    在js标签内,建立ttIng()函数,在函数内,经由过程id获得textarea对象,利用value属性获得textarea输入的内容,再经由过程innerHTML属性将获得值,及时输出在p标签内。

    994f412043715fdbd822a38c468920c5260f8c58.jpg?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1
  6. 6

    在浏览器打开test.html文件,输入内容,查看实现的结果。

    5e615d715fdb36205638d73fabc5260f88358d58.jpg?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1

总结:

  1. 1

    1、利用textarea标签建立文本域,同时利用p标签建立一块区域,用于输出监听的内容。

    2、给textarea绑定onkeyUp事务,当textarea输入内容时,执行ttIng()函数。

    3、在函数内,经由过程id获得textarea对象,利用value属性获得textarea输入的内容,再经由过程innerHTML属性将获得值,及时输出在p标签内。

  • 发表于 2020-09-21 19:00
  • 阅读 ( 186 )
  • 分类:其他类型

相关问题

0 条评论

请先 登录 后评论