javascript - 将 img 标签添加到文本区域以输入到文本文件中
问题描述
我正在尝试制作一个将 img 标签输入文本区域的按钮,以便我可以手动输入图像 src,然后在我提交表单后图像标签将保存到文本文档中。
我进行了设置,以便一切正常,除了单击按钮添加 img 标签时,它会在 textarea 标签之间的页面上添加一个 html 元素。我想要一个"<img src='' alt='' title=''>"
必须显示在文本区域内的字符串。
我将如何使用 jquery 来做到这一点?
当前代码(尝试修复错误的一些冗余变量等):
#img-insert-button
是有问题的按钮,供参考。
<body style="background-color:#131313; color: white; font-family: 'Gadugi'; padding: 10px;">
<script>
var str1 = "<";
var str2 = "img src='images/Computer.jpeg' alt='pc image' title=''";
var str3 = ">";
var str4 = str1.concat(str2);
var img_tag = str4.concat(str3);
$(document).ready(function(){
$("#img-insert-button").click(function(){
$('#article-main-body').append(img_tag);
});
});
</script>
<a class="home-link" href="index.php">Go Home</a>
<div class="heading">Write a Post</div>
<button id="img-insert-button">Insert Image</button>
<form method="post" action="create-article.php" enctype='multipart/form-data'>
<table style="width: 100%;">
<tr>
<td>
<label>Post Image</label>
</td>
<td>
<input type="file" name="image" required="" placeholder="Article Image" oninvalid="this.setCustomValidity('Please upload an article image')">
</td>
</tr>
<tr>
<td>
<label>Title</label>
</td>
<td>
<input name="post-title" type="text" maxlength="50">
</td>
</tr>
<tr>
<td>
<label>Sub-heading</label>
</td>
<td>
<input type="text" name="post-subheading" maxlength="130">
</td>
</tr>
<tr>
<td>
<label>Main Body</label>
</td>
<td>
<textarea name="post-main-body" style="height: 300px; width: 100%;" id="article-main-body"></textarea>
</td>
</tr>
</table>
<button type="submit" name="submit-button" style="margin: 5px;">Create Post</button>
</form>
</body>
解决方案
你不能附加到一个文本区域,你需要改变它value
尝试改变
$('#article-main-body').append(img_tag);
至
$('#article-main-body').val(function(_, currVal){
return currVal + img_tag;
});
推荐阅读
- c# - 无法部署 CefSharp - CefSharp.Core.Runtime.dll
- android - 成功登录后,我的登录屏幕不会将我重定向到新屏幕!扑
- python - 我的操作系统无法在 python 中从我的桌面读取文件
- jdbc - 与 Access 365 数据库的 ODBC 连接
- python - asyncio.run() 关闭 MainThread 事件循环?
- ssl - 使用 AAACertificateServices 证书的域示例
- javascript - 如何从 url 中提取路径参数?
- java - Graal-js 抛出文件系统提供程序错误
- angular - Angular:未捕获的 ReferenceError:未定义要求和 GET 403
- python - 函数的功能并在python中检查是否为真