Question

一旦我们在textarea内部点击，我想在textarea旁边显示一条短信。

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

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

和：

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

这是一个fiddle demo，只要我们点击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>

Answer 1

您可以执行以下操作 - 我会使用focus而不是click。以下代码添加了除textarea之外所需的文本消息。

如果您想使用箭头设置邮件样式，请查看以下内容：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>

Answer 2

添加：

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

标记在textarea div之后。

然后将评论替换为：

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

Answer 3

希望这会对你有所帮助。

＆＃13;

$(document).ready(function() {
  $('#textarea').click(function() {
    $('#showMsgId').text("some message .......")
  });
});

＆＃13;

input,
textarea,
select {
  display: block;
}

＆＃13;

<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>

＆＃13;

Answer 4

以下是我的非JavaScript替代版本的fiddle。

如果您对简单地显示文字感到满意，那么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-index和事件处理轻松处理所有这些任务，如本例所示。

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

在没有弹出窗口或警告框的情况下显示textarea旁边的对话框

4 个答案: