I have a title that the user can modify thanks to contenteditable.
I want that when the user presses enter this validates the title instead of passing a line.
<div class="panel-participants-title"
*ngIf="thread.title !== '' ">
<div class="panel-title"
contenteditable="true">
{{thread.title.substring(1)}}
</div>
</div>
.panel-participants-title:hover > *[contenteditable="true"] {
background: #989898;
}
.panel-participants-title > *[contenteditable="true"] {
outline: 0;
}
/////UPDATE
<div class="panel-participants-title">
<div class="panel-title"
contenteditable="true"
(keypress)= "validateTitle($event)">
{{thread.title.substring(1)}}
</div>
</div>
validateTitle(event: any): void {
if(event.keyCode===13) {
document.getElementById("panel-title").submit();
}
}
////////UPDATE2
validateTitle(event: any): void {
if(event.keyCode===13) {
event.preventDefault();
event.stopPropagation();
event.submit();
}
}
Here is a working example of the fiddle, in case it shuts down :)
document.querySelector('#id1').addEventListener('keypress', function (e) {
var key = e.which || e.keyCode;
if (key === 13) { // 13 is enter
var text = document.getElementById("id1").value;
if (text.includes("w")) {
alert("Omg, the string contains a W, try again");
} else {
document.getElementById("id1").blur();
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Input Field <input id="id1" type="text" name="fname">
onKeyPress="if(event.keyCode == 13) validerForm();"
and
function validerForm(){
document.getElementById("formulaire").submit();
}
Normally that's what you're trying to do. Basically when key number 13 (the Enter key) and presses it launches a function that will validate the form.
Related
When i press the Date control,
and i do not enter a date,
I click Esc ==> The Date control does not disappear
I click outside ==> The Date control does not disappear
here my code html and ts :
<input class="cssInputDate" type="text" id="dateDebut" name="dateDebut"
#dateDebut="ngModel"
(keyup)="onKeyUp($event)"
(blur)="checkDateDebut()"
required [ngModel]="dateDebutModel" (ngModelChange)="dateDebChange($event)" ngbDatepicker #ddeb="ngbDatepicker" >
<button tabindex="3" (click)="ddeb.toggle(); openDatepicker(ddeb)" type="button" style="margin-left: 0;" *ngIf="modificationMode" >
<i class="fa fa-calendar" aria-hidden="true"></i>
</button>
here the .ts :
openDatepicker(id){
console.log(" id =",id);
console.log(" dateDebInput =",this.dateDebInput);
this.dynamicId = id;
}
onClick(event) {
if(this.dynamicId == undefined){
console.log("Dynamic id ===",this.dynamicId);
}
else if(!this._eref.nativeElement.contains(event.target)) {
this.dateDebInput.close();
}
}
here the console log output :
any solution ?
i find a solution
i use #HostListener here the code :
#HostListener('mousedown', ['$event'])
mouseEvent(event) {
if(event.target.offsetParent.tagName !== 'NGB-DATEPICKER'){
this.dateDebInput.close();
}
}
same of escape :
#HostListener('window:keyup', ['$event'])
keyEvent(event: KeyboardEvent) {
if (event.key === "Escape") {
this.dateDebInput.close();
}
}
ere the code of checkDateDebut :
checkDateDebut() {
const check = this.dateDebutModel != null && this.dateDebutModel !== '';
const checkFinAfterDebut = this.checkDateFinAfterDateDebut();
if (!check) {
this.pushMessageFront('DIAG_ERR_029');
} else {
this.spliceMessageFront('DIAG_ERR_029');
}
if (!check || !checkFinAfterDebut) {
this.highlight('dateDebut', true);
} else {
this.highlight('dateDebut', false);
}
return check && checkFinAfterDebut;
}
the css :
.cssInputDate{
min-width: 85px;
}
I have a text box that takes input and when i hit enter it stores the output and displays in an unordered list format. The function without IIFE works when i use onclick event. However, with IIFE its not functioning. Please help.
<html>
<head>
<title>messagewithenter</title>
</head>
<body>
Message:
<input type="text" name="message" id="message">
<input type="submit" value="add" id="submitenter" style="display: none">
<ul id="list"></ul>
<script>
(function () {
var link = document.getElementById("submitenter");
link.addEventListener("click", function () {
document.onkeypress = enter;
function enter(e) {
if (e.which == 13 || e.keyCode == 13) {
addMessage();
}
}
});
function addMessage() {
var message = document.getElementById("message").value;
var output = "<li>" + message + "<li" + "<br>";
document.getElementById("list").innerHTML += output;
}
}());
</script>
</body>
</html>
You were binding the event on click event of an invisible element, simply make it
document.onkeypress = enter;
function enter(e) {
if (e.which == 13 || e.keyCode == 13) {
addMessage();
}
}
Demo
document.onkeypress = enter;
function enter(e) {
if (e.which == 13 || e.keyCode == 13) {
addMessage();
}
}
function addMessage() {
var message = document.getElementById("message").value;
var output = "<li>" + message + "<li" + "<br>";
document.getElementById("list").innerHTML += output;
}
Message:
<input type="text" name="message" id="message">
<input type="submit" value="add" id="submitenter" style="display: none">
<ul id="list"></ul>
link.addEventListener("click", function () {
document.onkeypress = enter;
...
This code is flawed because if it works, it would reset the document.onkeypress event handler every time you click in the input box.
It's also unnecessary, as you can set that onkeypress handler without needing the click event. The whole thing can be written like this:
document.onkeypress = function(e) {
if (e.which == 13 || e.keyCode == 13) {
addMessage();
}
}
No need for the click handler at all.
I am using clickedit plugins that edit the label and output the edited text. What I am aiming to do is format the output after clicking and editing the label.
HTML:
<p class="text-center">
<font size="5" color="#38283C">
<b><i><span id="mto-num-detail">KTR-2-KTR2-PR-C-00002</span></i></b>
</font>
</p>
<input class="form-control clickedit" type="text"/>
JavaScript:
// EDIT ON CLICK
var defaultText = 'Click To Input Custom PO Number';
function endEdit(e) {
var input = $(e.target),
p = input && input.prev();
p.text(input.val() === '' ? defaultText : input.val());
input.hide();
p.show();
}
$('.clickedit').hide()
.focusout(endEdit)
.keyup(function (e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
endEdit(e);
return false;
} else {
return true;
}
})
.prev().click(function () {
$(this).hide();
$(this).next().show().focus();
});
My question is how do I generate the same format as the initial text?
You can create a class in css like
.color-text{ color : #F00;}
And in click event add this class.
$('selector').addClass('color-text');
I am trying to show a popover when the CAPS lock key is on during typing password, the code is working fine, the popover is displayed when CAPS is on and is hidden when it is not. But I'm also getting the popover when I click on the password field, even if the caps is not on.
I need some help with this.
<input rel="popover" data-placement="right" data-content="CAPS IS ON" type="password" id="txtPassword" name="password" class="input-xlarge" value="" size="20" />
<script type="text/javascript">
jQuery('#txtPassword').keypress(function(e) {
var s = String.fromCharCode( e.which );
if ( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey ) {
jQuery('#txtPassword').popover('show');
}
else {
jQuery('#txtPassword').popover('hide');
};
});
</script>
TRY
UPDATE
HTML
Type Here:<br><input type="text" id="textbox"><br>On each keypress I will tell if caps lock is on<br><br> CAPS LOCK: <span id="cap"></span>
JQUERY
//<![CDATA[
$(window).load(function(){
$('#textbox').keypress(function(e) {
var s = String.fromCharCode( e.which );
if (s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey) {
$('#cap').removeClass('red').addClass('green').html('ON');
} else {
$('#cap').removeClass('green').addClass('red').html('OFF');
}
});
});//]]>
css
.red {
color: red;
font-weight:bold;
}
.green {
color: green;
font-weight:bold;
}
Update Answer: to detect Capital letter
Here is the DEMO http://jsfiddle.net/yeyene/Z52Az/4/
Use this script,
$('#txtPassword').keyup(function () {
var character = $('#txtPassword').val();
var lastChar = character.substr(character.length - 1);
if (lastChar == lastChar.toUpperCase()) {
alert ('You typed capital letter!');
}
});
I need help in textbox keypress function.
If textbox fields is empty menad no need to post values.
my following functions working .if textbox fields is empty,i press enter key going nexline thats fine.but i press enter key two times values posted.
what is the problem in my code.plz help me.
$(".ppop-comment").keypress(function(e)
{
if($('#add_comment').val()=="")
{
if (e.which == 32)
return false;
}
else if (e.keyCode == 13 && !e.shiftKey && !$('#add_comment').val()==" ")
{
$("#submit-comment").click();
}
});
<form id="commentform" method="post">
<textarea id="add_comment" name="meetnewpeople[message]" class="popup-comment">
<input id="submit-comment" type="button" value="Post a comment" />
</form>
$(".ppop-comment").keypress(function(e)
{
if($('#add_comment').val().trim()!="")
{
if (e.keyCode == 13 && !e.shiftKey && !$('#add_comment').val()==" ")
{
$("#submit-comment").click();
}
}
else
{
return false;
}
});