Input loses placeholder after double-click - javascript

On click placeholder disappears, on blur it reappears, but if double-click happens instead of 1 click placeholder just disappears forever, turning off double-click default doesn't help either. Is it somehow possible to treat double-click as normal click? Or is it supposed to destroy placehoder?
var input = document.getElementsByTagName("input")[0];
input.onclick = function() {
p_holder = this.placeholder;
this.placeholder = "";
}
input.onblur = function() {
this.placeholder = p_holder;
}
input.ondblclick = function(e) {
e.preventDefault();
}
<input type="text" placeholder="text goes here">

I think this might be what you are looking for.
Comments are in the source code.
var input = document.getElementsByTagName("input")[0];
// Store original placeholder
var p_holder = input.placeholder;
// Remove on focus
input.onfocus = function() {
this.placeholder = "";
}
// Restore on blur
input.onblur = function() {
this.placeholder = p_holder;
}
<input type="text" placeholder="text goes here" />
If you have any questions please leave a comment below and I well get back to you as soon as possible.
I hope this helps. Happy coding!

It is not double click, but two single clicks which are causing this issue, because on the second click, the value of p_holder will be set to ''.
To prevent that, you can check for the value first:
input.onclick = function (){
if (this.placeholder !== '') {
p_holder = this.placeholder;
this.placeholder = "";
}
}
By the way, if you just need to deal with placeholder, you actually don't need to manipulate it. The browser automatically removes it when some value is inserted into the input, and restores it when the value is removed.

Related

How can I add focus() and set placeholder text on click event

I am adding an event listener to my search-icon to listen for "click" events and then when fired call a function that adds focus to the element and changes the placeholder attribute to "Enter your search term...". Currently when the icon is clicked, the input appears with focus, but no placeholder text. What am I missing?
window.onload = function() {
var el = document.getElementById('gsc-i-id1');
el.setAttribute('placeholder', 'Enter your search term...');
el.style.background = '';
el.style.textIndent = '0';
el.addEventListener('blur', function(e) {
e.target.style.backgroundImage = 'none';
e.target.style.textIndent = '0';
}, false );
var searchIcon = document.getElementById('search-icon');
searchIcon.addEventListener('click', function(e) {
e.preventDefault();
el.focus( function() {
el.setAttribute('placeholder', 'Enter your search term...');
});
}, false );
};
What browser are you using? IIRC, IE (11 at least, don't know about "Edge") will hide the placeholder as soon as the field receives focus. (Chrome gets this right, though.)

Angular DOM modification timing

I have a Controller,
that change some values in the "then" of a barcode scanner.
First thing it set the code, then set a "disabled" variable, and then focus an input.
.then(function (barcodeData) {
// Success! Barcode data is here
$scope.selectProdotto = barcodeData;
$scope.txtDisabled = false;
var pageElements = document.querySelectorAll('input[type=number], input[type=text], textarea');
var first_element = pageElements[1];
first_element.focus();
});
The input that i want to focus is ;
<input class='input' type='number' ng-disabled="txtDisabled" />
Now the problem is that the input is still disabled after i changed
$scope.txtDisabled = false;
so when i do .focus() it fail.
After my function finish my input is correctly enabled.
So im asking when are variables applied to DOM ?
How can i wait for the input to be ready and enabled to focus ?
did you try
.then(function (barcodeData) {
// Success! Barcode data is here
$scope.selectProdotto = barcodeData;
$scope.txtDisabled = false;
$scope.$apply();
var pageElements = document.querySelectorAll('input[type=number], input[type=text], textarea');
var first_element = pageElements[1];
first_element.focus();
});

press key inside an input box

I am filling up a login form using
document.getElementById('i0116').value = email;
document.getElementById('i0118').value = password;
document.getElementById('idSIButton9').click();
Now the problem starts when form is identifying that the value is not filled by any key event, I mean the placeholders remains there even if I fill the form and on submit it says fields are empty.
I was trying to fix it by firing a keypress event on input box before I fill the value. but I am not able to do it.
I tried :
var target = document.getElementById('email');
var evt = document.createEvent("Events");
evt.initEvent("keypress", true, true);
evt.view = window;
evt.altKey = false;
evt.ctrlKey = false;
evt.shiftKey = false;
evt.metaKey = false;
evt.keyCode = 0;
evt.charCode = 'a';
target.dispatchEvent(evt);
also instead of "Events" I tried "UIEVENTS" and "KEYEVENTS" none of them helped , I am using chrome browser.
Just got the hang of what you really are seeking to achieve. You can clear off the placeholder value onClick() and restore the placeholder value using onBlur(), something like the following
function clearPlaceholder(id){
document.getElementById(id).placeholder = "";
};
function restorePlaceHolder(id, placeHolderText){
document.getElementById(id).placeholder = placeHolderText;
};
<input id="10116" placeholder="email" onClick="clearPlaceholder('10116')" onBlur="restorePlaceHolder('10116','email')">
<input id="10118" placeholder="password" onClick="clearPlaceholder('10118')" onBlur="restorePlaceHolder('10118','password')">
Is that what you were looking for?
My Issue was resolved using:
var element = document.getElementById('idTxtBx_SAOTCC_OTC');
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
element.dispatchEvent(evt);
It was knockout js, because of which just setting the value of element was not working.so I was trying to keypress.
chanage event triggers "textInput" for knockoutjs, Instead of just setting .value attribute.

Trying to prevent this function from firing till text box is "focusout" or something better

I would like to get this function to check the email text box after the textbox has lost focus and not as soon as the user starts to type. So it only guides them after an error in the text box happens on .emailError textbox class.
I really don't want it to start showing error class till after the first try. Only to show green when the correct input has taken place.
var c = 0;
c = parseInt("c");
$('.emailError').on('focusout', function() {
c = 1;
});
if (c == 1) {
$('.emailError').on('keyup focusout', function() {
var regex = /^([a-zA-Z0-9_\-\.]+)#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
var containsNonEmail = this.value.match(regex);
console.log(containsNonEmail);
if (!containsNonEmail) {
$(".wirelessEmail").css("border", "2px solid #ffeef6");
$(".wirelessEmail").css("background-color", "#ffecf2");
} else {
$(".wirelessEmail").css("border", "2px solid green");
$(".wirelessEmail").css("background-color", "#f5fef2");
}
});
}
You need to have the if else check inside of the function and not on the outside. When it is outside, you will not bind the event.
Better way would be to do the checking so you do not rely on a global variable, this way you could use it more than once on the page. To do that use a data attribute.
$('.emailError').on('keyup focusout', function(evt) {
var tb = $(this);
var once = tb.data("once");
if(evt.type==="focusout" || once) {
if (!once) tb.data("once", "true");
var isError = tb.val().length<5;
tb.toggleClass("error", isError);
}
})
.error { background-color : red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="emailError" />
Use the Onblur function
The onblur event occurs when an object loses focus.
The onblur event is most often used with form validation code (e.g. when the user leaves a form field).

variable assignment prevents from removing item?

I'm creating editable area, where normal text is replaced by input and you can edit values. After editing you can hit enter or click button to accept that. During editing edited variable is set to true to prevent other fields to be editable. Here's the HTML
<section class="person-info">
<div class="row">
<span id="name" class="editable">Martin Chikilian</span>
<span id="living-place" class="editable">Portland, Oregon, USA</span>
<span id="langs" class="editable">English, French, German</span>
</div>
</section>
and javascript code:
$(function(){
var edited = false;
$('.editable').click(function(){
if(!edited){
edited = true;
var _this = $(this);
var confirmIcon = (_this.attr('id') == 'name') ? 'big-confirm' : 'confirm';
var text = $(this).text();
//this will be injected into editable element to replace existing text
var input = $('<input type="text" value="' + text +'" /><span id="accept" class="icon ' + confirmIcon + '"></span>');
_this.html('');
_this.append(input);
input.focus();
var accept = _this.find('#accept');
//binding click event to confirmation button
accept.click(function(){
var inputVal = input.val();
_this.html(inputVal);
//edited = false;
});
//binding event to enter press
input.keypress(function(e){
if(e.which == 13){
var inputVal = input.val();
_this.html(inputVal);
edited = false;
}
});
}
});
});
Everything works when you hit enter, but when I try to do that by clicking acccept button it does nothing unless I remove variable assignment edited = false;. But it can't be left like that because it prevents other fields to be editable. What is the problem? Is it because element with event attached (accept button) is removed as well? Does anyone have any solution or clear explanation of that behavious? Thanks in advance!
Since #accept is a child of .editable, the click event that you're listening to bubbles up the DOM and the click handler on .editable is fired off too, causing edited === true.
You can get around this by stopping the event from propagating using event.stopPropagation():
accept.click(function(e){
var inputVal = input.val();
_this.html(inputVal);
edited = false;
e.stopPropagation();
});
Example: http://jsfiddle.net/6zAN7/13/

Categories