在文本区域旁边显示一个对话框，不显示弹出窗口或警告框

Show a dialog box next to a textarea without pop-up or alert box

本文关键字：显示 窗口 警告 对话框 区域 文本 一个      更新时间：2023-09-26

单击文本区域后，我想在文本区域之外显示一条短消息。

以下是我需要修改的简单代码：

<textarea id="txt" ></textarea>

和：

$('#txt').click(function(){
// what should i put here to show a dialogbox besides textarea ?
});

这是一个小提琴演示，除了我需要把我想要的任何东西作为一条消息，一旦我们点击文本区域。

我是一个完全的新手，所以如果我没有按照应该的方式做事，请耐心等待。非常感谢。

input, textarea, select {
    display: block;
}
<form>
    <p>Try submitting an empty form and one with invalid email addresses.</p>
    <label for="one">One Email: </label><input type="email" id="one" required data-errormessage-value-missing="Something's missing" data-errormessage-type-mismatch="Invalid!">
    <label for="another">Another Email: </label><input type="email" id="another" data-errormessage="Generic error message">
    <label for="textarea">A textarea: </label><textarea id="textarea" required data-errormessage-value-missing="Add some text"></textarea>
    <select required data-errormessage-value-missing="Please, pick one">
        <option selected disabled value="">Pick one</option>
        <option value="1">One</option>
    </select>
    <button>Submit</button>
</form>

您可以执行以下操作，我将使用focus而不是click。下面的代码在您的文本区域之外添加了您需要的文本消息。

如果你也想用箭头来设计消息的样式，可以看看这个：cssarrowplease.com

// show hidden message on focus
$('#txt').on('focus', function() {
  $('#txt-message').show();
});
// hide hidden message on blur - optional extra
$('#txt').on('blur', function() {
  $('#txt-message').hide();
});
/* start message hidden */
#txt-message {
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="txt"></textarea>
<span id="txt-message">message here</span>

添加：

<span id='shortMessage'></span>

标签就在文本区域div.之后

然后将您的评论替换为：

$('#shortMessage').innerHTML('your message');

希望这将对您有所帮助。

$(document).ready(function() {
  $('#textarea').click(function() {
    $('#showMsgId').text("some message .......")
  });
});
input,
textarea,
select {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>Try submitting an empty form and one with invalid email addresses.</p>
  <label for="one">One Email:</label>
  <input type="email" id="one" required data-errormessage-value-missing="Something's missing" data-errormessage-type-mismatch="Invalid!">
  <label for="another">Another Email:</label>
  <input type="email" id="another" data-errormessage="Generic error message">
  <label for="textarea">A textarea:</label>
  <div style="width: 100%; overflow: hidden;">
    <textarea id="textarea" required data-errormessage-value-missing="Add some text" style="width: 200px; float: left;"></textarea>
    <span id="showMsgId" style="margin-left: 10px;"></span>
  </div>
  <select required data-errormessage-value-missing="Please, pick one">
    <option selected disabled value="">Pick one</option>
    <option value="1">One</option>
  </select>
  <button>Submit</button>
</form>

这是我的非JavaScript替代方案的小提琴。

如果你对简单地显示文本感到满意，Pete的答案是有效的。如果你需要信息框看起来很漂亮，并显示在其他元素之上，那么你需要一些不同的东西，比如：

CSS：

.cPopTable {
    position: absolute;
    top: 50px;
    right: 200px;
    background-color: #ffffff;
    z-index: 10;
    display:none;
}
.cContainer:active .cPopTable {
    display:table;
}

HTML:

<div class="cContainer">
    <textarea id="txt">Default text here</textarea>
    <table class="cPopTable"><tr><td>message pop-up here</td></tr></table>
</div>

另外，好处是不使用任何JavaScript。事实上，除非您担心非常旧的浏览器，否则您可以使用CSS z索引和事件处理轻松处理所有类似的任务，如本例所示。

通过使用cPopTable CSS，您可以轻松地更改方框的位置和显示方式（字体、背景等）。

相关文章：