Я хочу показать короткое сообщение помимо текстовой области, как только мы щелкнем внутри текстовой области.
Вот простой код, который мне нужно изменить:
<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>
4 ответа
Вы можете сделать что-то вроде следующего - и я бы использовал 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>
Вот скрипка для моей альтернативы, отличной от 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.
Надеюсь, что это поможет вам .
$(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>
Добавлять:
<span id='shortMessage'></span>
Тег сразу после текстовой области div.
Затем замените ваш комментарий на:
$('#shortMessage').innerHTML('your message');
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.