一个DIV,可以加输入文本框么?急

一个DIV,可以加输入文本框么?急,第1张

input文本框是可以加在div里边的,如下这个示例代码:

<div>

  <input type="text" size="40" value="这是一个放在div里边的输入框" />

</div>

最后输出效果如下图:

这个前面是文本框,写法是:

<input type=text>

后面是按钮,写法是:

<input type=submit value="搜索">

背景:需要编写一个简单的文本输入框,要求可以添加超链接,并且超链接可以修改内容,超链接在文本框中只显示标题(类似在html中显示a标签一样)

目前的基于vue框架:

html:

contenteditable属性可以把div变成可编辑状态,这是开发文本编辑框的基础。添加该属性后基本是满足一般文本输入。

1.换车键问题:

在可编辑div回车会在文本框中添加div标签(也可能是p标签),所以需要在div中监控回车事件并取消默认事件

2.获取div的内容

需要使用this.$refs.myeditor.innerHTML来获取,text.textarea虽然绑定了值但实际是获取不到的,除非有进行手动赋值。

3.添加超链接

这里主要讲讲添加的方式,具体可根据需求来。

因为我这里是点击一个按钮打开d框的方式来添加超链接,所以:

这样能确保超链接是添加在你之前光标定位的地方,不然就会出现超链接只能添加在文本尾部的情况。

涉及光标的方法:


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11638493.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-17
下一篇 2023-05-17

发表评论

登录后才能评论

评论列表(0条)

保存