div实时还原textarea的输入

马黑黑

马黑黑

这是通过 pencil code 敲出来的代码：

1. <style>
   
2. #inputbox {
   
3.         width: 600px;
   
4.         height: 360px;
   
5.         display: block;
   
6.         margin: auto;
   
7.         padding: 8px;
   
8.         border: 1px solid #ccc;
   
9.         font: normal 16px/20px sans-serif;
   
10. }
    
11. 
    
12. #showbox {
    
13.         margin: auto;
    
14.         margin-bottom: 10px;
    
15.         padding: 8px;
    
16.         border: 1px solid #ccc;
    
17.         width: 600px;
    
18.         height: 360px;
    
19.         font: normal 16px/20px sans-serif;
    
20.         white-space:pre-wrap;
    
21.         word-break: break-all;
    
22. }
    
23. </style>
    
24. 
    
25. <div id="showbox"></div>
    
26. <textarea id="inputbox"></textarea>
    
27. 
    
28. <script>
    
29. inputbox.oninput = () => {
    
30.         showbox.innerText = inputbox.value;
    
31.         showbox.scrollTop = inputbox.scrollTop;
    
32.         showbox.style.cssText += inputbox.clientHeight < inputbox.scrollHeight ? 'overflow-y : scroll' : 'overflow-y: auto';
    
33. }
    
34. 
    
35. inputbox.onscroll = () => showbox.scrollTop = inputbox.scrollTop;
    
36. </script>

复制代码

红影

下面那个框里输入的内容，都时时在上面的框里显示出来了，好神奇

马黑黑

红影 发表于 2023-1-5 21:47
下面那个框里输入的内容，都时时在上面的框里显示出来了，好神奇

JS里设计了文本框的 oninput 事件，就是输入事件，它的每一次输入更新，div都同步接收文本框的内容，并且，两者的 scrollTop 即滚动高度保持一致，还根据文本框滚动条的有无同步设置div的垂直方向的滚动条。

JS还有一个事件，onscroll 事件，滚动事件，将div的滚动高度和自己的保持一致。

CSS也很重要，各属性尽可能与文本框默认的相关属性值一致。其中，高宽、边框、内边距、字体等要相一致，还有，由于div的特性，还需要设置 white-space 和 word-break，不然经不起推敲。

红影

马黑黑 发表于 2023-1-5 22:07
JS里设计了文本框的 oninput 事件，就是输入事件，它的每一次输入更新，div都同步接收文本框的内容，并且 ...

这里面要考虑这么多细节的呢。学习了

马黑黑

红影 发表于 2023-1-6 13:27
这里面要考虑这么多细节的呢。学习了

细节很多，方方面面都需要考虑的

红影

马黑黑 发表于 2023-1-6 13:36
细节很多，方方面面都需要考虑的

做个工具真不容易

马黑黑

红影 发表于 2023-1-6 15:49
做个工具真不容易

其实做什么都不是容易的，你觉得容易的时候，是你精于此道了

红影

马黑黑 发表于 2023-1-6 18:01
其实做什么都不是容易的，你觉得容易的时候，是你精于此道了

是的，当隔行如隔山的时候，更觉得难上加难。

马黑黑

红影 发表于 2023-1-6 20:38
是的，当隔行如隔山的时候，更觉得难上加难。

入门很重要，入门了就能理解

红影

马黑黑 发表于 2023-1-6 20:46
入门很重要，入门了就能理解

门都找不着

马黑黑

红影 发表于 2023-1-7 10:34
门都找不着

导航用上

红影

马黑黑 发表于 2023-1-7 11:16
导航用上

这个对导航没用

马黑黑

红影 发表于 2023-1-7 16:37
这个对导航没用

导航用得好，入门就快

红影

马黑黑 发表于 2023-1-7 17:57
导航用得好，入门就快

大门没在导航的搜索范围内

马黑黑

红影 发表于 2023-1-7 21:31
大门没在导航的搜索范围内

精细点的导航都有

红影

马黑黑 发表于 2023-1-7 21:51
精细点的导航都有

那还不如放大镜呢

马黑黑

红影 发表于 2023-1-7 22:48
那还不如放大镜呢

也可以

红影

马黑黑 发表于 2023-1-8 21:45
也可以

你最喜欢用的东东

马黑黑

红影 发表于 2023-1-8 22:39
你最喜欢用的东东

必须用用