我在 Bootstrap 模態中包含了一個 Textarea，Before<textarea>Foo</textarea>After但它總是只顯示Before [empty textarea] After。我不知道為什么會這樣。我沒有 JS 對那個 textarea 做任何事情，所以之間的內容<textarea></textarea>應該只顯示對嗎？
我有以下 Bootstrap 模式的代碼
<section class='modal fade' id='photo-caption-modal'>
<div class='modal-dialog modal-dialog-centered'>
<div class='modal-content w-75 mx-auto'>
<div class='modal-header'>
<h6 class='modal-title'>Modify the photo caption</h6>
<button type='button' class='btn-close' data-bs-dismiss='modal'></button>
</div>
<div class='modal-body'>
Before<textarea class='form-control' id='photo-caption' rows='3' placeholder="Write a caption"> HELLO WORLD </textarea>After
</div>
</div>
</div>
</section>
我展示的
let captionModal = new bootstrap.Modal(document.querySelector('#photo-caption-modal'));
captionModal.show();
我只是希望在 textarea 中的 Before 和 After 之間看到hello world，但它是空的。“你好世界”不會改變任何東西。
下面是我看到的截圖
- 瀏覽器截圖
- Chrome 檢查元素特寫
uj5u.com熱心網友回復：
它在代碼編輯器中對我來說很好用，所以肯定有一些流氓自定義 CSS 或 javascript 隱藏。在 chrome 中檢查元素時，轉到樣式選項卡和計算選項卡并查找可能隱藏它的任何自定義 css。
如果您放置在其 innerHTML 中的默認文本不可見，那么最好知道當用戶輸入值時您是否可以看到該文本。
由于您粘貼的代碼運行良好……您至少知道什么沒有損壞。您在其他地方有一些自定義 css 或 js 隱藏了該值，因此請繼續挖掘。
let captionModal = new bootstrap.Modal(document.querySelector('#photo-caption-modal'));
captionModal.show(); <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
<section class='modal fade' id='photo-caption-modal'>
<div class='modal-dialog modal-dialog-centered'>
<div class='modal-content w-75 mx-auto'>
<div class='modal-header'>
<h6 class='modal-title'>Modify the photo caption</h6>
<button type='button' class='btn-close' data-bs-dismiss='modal'></button>
</div>
<div class='modal-body'>
Before<textarea class='form-control' id='photo-caption' rows='3' placeholder="Write a caption"> HELLO WORLD </textarea>After
</div>
</div>
</div>
</section>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/360342.html
標籤：javascript html 形式 推特引导 引导模式