باز نشدن modal وقتی که در فرم ارسال شده از enter زده میشه
سلام دوستان من یک فرمی دارم که شامل اینپوت textarea هست که کاربر میتونه داخل این input از گزینه enter استفاده کنه و در خط پایینی متن خودشو بنویسه ، متن این پیام در یک صفحه دیگه باید با زدن گزینه "جزییات درخواست" در قالب یک modal نمایش داده شه با همون فرمی که کاربر ارسال کرده
<div id="modal" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background-color:white; border:1px solid #ccc; padding:20px; z-index:1000;">
<h2>جزئیات درخواست</h2>
<p id="modalDescription"></p>
<button onclick="closeModal()">بستن</button>
</div>
<script>
function showModal(id, description) {
document.getElementById('modalDescription').innerText = description;
document.getElementById('modal').style.display = 'block';
window.currentRequestId = id;
}
function closeModal() {
document.getElementById('modal').style.display = 'none';
}
</script>این کد showmodal من هست که درست کار نمیکنه ولی وقتی داخل متن ارسالی از enter استفاده شده باشه ، modal باز نمیشه. مشکل از کجاست بنظرتون؟؟
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
سلام وقتتون بخیر و خوشی
مشکل شما به خاطر نحوه‌ی نمایش متن داخل modal است. وقتی کاربر از Enter استفاده می‌کنه، متن در واقع به صورت یک خط جدید در textarea ذخیره میشه، اما وقتی شما این متن رو در modal نمایش می‌دید، HTML به صورت ساده پردازش میشه و خط‌های جدید (یعنی تگ‌های <br> یا \n) نمایش داده نمی‌شن.
برای حل این مشکل، باید متن ارسالی رو طوری تبدیل کنید که خط‌های جدید در modal به درستی نمایش داده بشه. شما می‌تونید با استفاده از تابع replace() تگ‌های <br> رو به \n تبدیل کنید.
در اینجا یک راهکار ساده برای نمایش صحیح متن با استفاده از innerHTML به جای innerText برای پردازش تگ‌ها آورده شده:
<div id="modal" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background-color:white; border:1px solid #ccc; padding:20px; z-index:1000;">
<h2>جزئیات درخواست</h2>
<p id="modalDescription"></p>
<button onclick="closeModal()">بستن</button>
</div>
<script>
function showModal(id, description) {
// تبدیل متن به HTML مناسب برای نمایش خط‌های جدید
var formattedDescription = description.replace(/\n/g, "<br>");
document.getElementById('modalDescription').innerHTML = formattedDescription;
document.getElementById('modal').style.display = 'block';
window.currentRequestId = id;
}
function closeModal() {
document.getElementById('modal').style.display = 'none';
}
</script>
در خط formattedDescription = description.replace(/\n/g, "<br>");، ما تمامی \n های موجود در متن رو به تگ <br> تبدیل می‌کنیم.
در داخل modalDescription، به جای استفاده از innerText، از innerHTML استفاده می‌کنیم تا تگ‌های HTML (مثل <br>) در متن قابل نمایش باشند.
این کار باید باعث بشه که متن با استفاده از Enter داخل modal به درستی نمایش داده بشه.