Показать диалоговое окно рядом с текстовой областью без всплывающего окна или окна предупреждения

Question

Я хочу показать короткое сообщение помимо текстовой области, как только мы щелкнем внутри текстовой области.

Вот простой код, который мне нужно изменить:

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

А также :

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

Вот демонстрационная версия скрипты, за исключением того, что мне нужно поместить все, что я хочу, в качестве сообщения, как только мы нажмем внутри 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>

javascript jquery html

2

kenoussi yahya 17 Дек 2015 в 16:43

Answer 1

Вы можете сделать что-то вроде следующего - и я бы использовал 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>

1

Pete 17 Дек 2015 в 15:36

Answer 2

Вот скрипка для моей альтернативы, отличной от JavaScript.

Ответ Пита работает, если вы удовлетворены простым отображением текста. Если вам нужно, чтобы информационное поле выглядело красиво и отображалось над другими элементами, вам понадобится что-то другое, например:

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 и обработку событий, как показано в этом примере.

Вы можете легко изменить положение и способ отображения окна (шрифт, фон и т. Д.), Работая с CSS cPopTable.

0

Alex Kirko 17 Дек 2015 в 15:09

Answer 3

Надеюсь, что это поможет вам .

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

0

Prakash 17 Дек 2015 в 14:05

Answer 4

Добавлять:

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

Тег сразу после текстовой области div.

Затем замените ваш комментарий на:

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

0

Tuck Wise 17 Дек 2015 в 13:52

Показать диалоговое окно рядом с текстовой областью без всплывающего окна или окна предупреждения

4 ответа

Похожие вопросы

Новые вопросы

javascript