div标签模拟textarea


只需要将div设为contenteditable即可

  • 以下是例子
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>div模拟textarea</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .virtual-textarea{
                min-height: 100px;
                max-height: 300px;
                width: 300px;
                overflow-x: hidden;
                overflow-y: auto;
                border: 1px solid #f60;
            }
        </style>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <div class="virtual-textarea" contenteditable></div>
    </body>
</html>

  • 效果展示
    这里写图片描述

以上

回答: 根据你提供的引用内容,你遇到的问题是关于textarea内容贴边的。你尝试了一些方法来解决这个问题。首先,你尝试使用CSS样式来去掉textarea右下角的拖拽区的边框,但是发现在出现滚动条后进行拖拽时整个区域消失了。然后,你尝试使用::-webkit-scrollbar-corner来模拟resize的两条杠,但是在滚动条消失后又消失了。最后,你使用了一个比较低级的方法,通过给textarea套上一个div,并使用div的伪元素来遮住边线,成功解决了这个问题。\[1\] 另外,你还提到了获取光标位置的问题。你使用了ref来获取textarea标签元素,并通过selectionStart和selectionEnd属性来获取光标的开始和结束位置。这样可以在进行内容插入时准确获取光标的位置。\[2\] 最后,你还提供了一段普通滚动条样式的代码,其中包括整体样式、滚动条内部小方块的样式和滚动条内部轨道的样式。这些样式可以用来自定义滚动条的外观。\[3\] 综上所述,你遇到的问题是关于textarea内容贴边的,你尝试了多种方法来解决这个问题,并最终通过给textarea套上一个div并使用div的伪元素来遮住边线的方式解决了问题。同时,你还提供了获取光标位置和自定义滚动条样式的相关信息。希望这些信息对你有帮助。 #### 引用[.reference_title] - *1* *3* [自定义滚动条后textarea resize拖拉位置出现边框](https://blog.csdn.net/weixin_41552521/article/details/106566637)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Textarea-光标-有趣的实践](https://blog.csdn.net/qq_36523196/article/details/130263750)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值