马黑黑 发表于 2023-1-5 21:23

div实时还原textarea的输入

本帖最后由 马黑黑 于 2023-1-5 22:54 编辑 <br /><br /><style>
#inputbox {
        width: 600px;
        height: 360px;
        display: block;
        margin: auto;
        padding: 8px;
        border: 1px solid #ccc;
        font: normal 16px/20px sans-serif;
        word-break: break-all;
}

#showbox {
        margin: auto;
        margin-bottom: 10px;
        padding: 8px;
        border: 1px solid #ccc;
        width: 600px;
        height: 360px;
        font: normal 16px/20px sans-serif;
        white-space:pre-wrap;
        word-break: break-all;
}
</style>

<div id="showbox"></div>
<textarea id="inputbox"></textarea>

<script>
inputbox.oninput = () => {
        showbox.innerText = inputbox.value;
        showbox.scrollTop = inputbox.scrollTop;
        showbox.style.cssText += inputbox.clientHeight < inputbox.scrollHeight ? 'overflow-y : scroll' : 'overflow-y: auto';
}

inputbox.onscroll = () => showbox.scrollTop = inputbox.scrollTop;
</script>

马黑黑 发表于 2023-1-5 21:25

本帖最后由 马黑黑 于 2023-1-5 21:30 编辑

这是通过 pencil code 敲出来的代码：<style>
#inputbox {
        width: 600px;
        height: 360px;
        display: block;
        margin: auto;
        padding: 8px;
        border: 1px solid #ccc;
        font: normal 16px/20px sans-serif;
}

#showbox {
        margin: auto;
        margin-bottom: 10px;
        padding: 8px;
        border: 1px solid #ccc;
        width: 600px;
        height: 360px;
        font: normal 16px/20px sans-serif;
        white-space:pre-wrap;
        word-break: break-all;
}
</style>

<div id="showbox"></div>
<textarea id="inputbox"></textarea>

<script>
inputbox.oninput = () => {
        showbox.innerText = inputbox.value;
        showbox.scrollTop = inputbox.scrollTop;
        showbox.style.cssText += inputbox.clientHeight < inputbox.scrollHeight ? 'overflow-y : scroll' : 'overflow-y: auto';
}

inputbox.onscroll = () => showbox.scrollTop = inputbox.scrollTop;
</script>

红影 发表于 2023-1-5 21:47

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

马黑黑 发表于 2023-1-5 22:07

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

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

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

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

红影 发表于 2023-1-6 13:27

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

这里面要考虑这么多细节的呢。学习了{:4_187:}

马黑黑 发表于 2023-1-6 13:36

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

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

红影 发表于 2023-1-6 15:49

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

做个工具真不容易{:4_204:}

马黑黑 发表于 2023-1-6 18:01

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

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

红影 发表于 2023-1-6 20:38

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

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

马黑黑 发表于 2023-1-6 20:46

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

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

红影 发表于 2023-1-7 10:34

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

门都找不着{:4_173:}

马黑黑 发表于 2023-1-7 11:16

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

导航用上

红影 发表于 2023-1-7 16:37

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

这个对导航没用{:4_173:}

马黑黑 发表于 2023-1-7 17:57

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

导航用得好，入门就快

红影 发表于 2023-1-7 21:31

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

大门没在导航的搜索范围内{:4_173:}

马黑黑 发表于 2023-1-7 21:51

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

精细点的导航都有

红影 发表于 2023-1-7 22:48

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

那还不如放大镜呢{:4_173:}

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

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

也可以

红影 发表于 2023-1-8 22:39

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

你最喜欢用的东东{:4_173:}

马黑黑 发表于 2023-1-9 11:46

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

必须用用
页: [1] 2 3
查看完整版本: div实时还原textarea的输入