We Keep Coding

How to keep a suffix while masking a input using jQuery

I'm trying to mask a user input with the following mask "########-##.####.7.09.009" using jQuery, so when the user starts typing it would go like this:
1______-__.____.7.09.009 (user typed 1)
12_____-__.____.7.09.009 (user typed 2)
123____-__.____.7.09.009 (user typed 3)
and so on until it reaches the "7.09.009" part.
The user should not be able to edit that part, it is like a fixed placeholder there. I've tried using Jasny's input mask with some success but since numbers are masked with 0's and the fixed suffix has 0's, it allowed the user to type where there are zeroes in the fixed part. I did not find a way to replace the numbers placeholder from 0 to something else, as I imagine that would have solved my problem.
Then I found another jQuery mask plugin that allows me to mask numbers using # but as it also recognizes 0's as a placeholder for numbers, it ended up not working. I also tried creating a custom mask like so:
$("#numero-processo").mask('0000000-00.0000.A.BC.BBC',
{placeholder: "_______-__.____.7.09.009",
'translation': {
A: {pattern: /[7]/},
B: {pattern: /[0]/},
C: {pattern: /[9]/}
}});
This worked to some extent, but when the user reached the fixed suffix part, (he/she) would have to actually type the suffix "7.09.009", and that is the only thing that would be allowed there because of the custom mask. However, I do not want the user to type the suffix, it needs to be fixed there. Does anyone know how to accomplish this? Thank you.

You usually solve this by letting the fixed part outside the input (if the user shouldn't modify it, it's more ergonomic if it's actually not in the alterable part).
<input type="text" />.7.09.009
You can make it nicer with some css around, and you'll have to add it in JS or in the language you use to process the data. So maybe something like that :
<div class="mask_field" addendum=".7.09.009"><input type="text" />.7.09.009</div>
Could be easier to work with.

You could accomplish this using this library
<script src="https://rawgit.com/RobinHerbots/Inputmask/4.x/dist/jquery.inputmask.bundle.js"></script>
Your javascript would be:
<input id="numero-processo" placeholder="_______-__.____.7.09.009" />
<script>
$(document).ready(function(){
$("#numero-processo").inputmask("9999999-99.9999.7.0\\9.00\\9");
});
</script>
Here's a jsfiddle: https://jsfiddle.net/3kyau2p8/

$("#numero-processo").keyup(function(){
var input = $(this).val();
if(input.length == 15) {
input += ".7.09.009";
$(this).val(input);
}
});

Input value sometimes doesn't apply

To be straightforward, on a page, there is a search input.
var input = document.getElementById('search-input');
function handle(e) {
if (e.keyCode === 13) {
window.location = '../?s=' + input.value;
}
}
<div class="search-form-mobile">
<input type="text" id="search-input" onkeypress="handle(event)" class="form-control" placeholder="Search">
</div>
I know that this is a correct JavaScript code, but my question is, why does it sometimes accepts the input value and sometimes it doesn't? I've been scratching my head for a while and can't figure out what's wrong.
Should I wrap it up in a <form> or can i leave it like that?
The <script> is at the very bottom in footer.php.
It's a WordPress site.

Use onkeydown (or onkeyup, if you want the event to fire when the key is released, not when pressed) instead of onkeypress.
You can find a full list of keys that fire onkeypress event here.
Following the comments, it looks like this is not a JavaScript issue at all, but has to do with escaping the query string, specifically about what characters you can and cannot use without escaping in a $_GET parameter.
This has been asked and answered before.

Javascript to replace all the input.value by '*' like a password typing

I have a
<input id="TxtBox" runat="server" autocomplete="off" onkeypress="">
And while doing the keypress, directly with js code, it replaces all the characters for '*'. Like a password typing.
Edit: 2022
As i read this old question i found imprecision why i wanted to avoid type="password" at that time. It was because if that attribute were in the tag the browser would remind a old password and it was annoying.
Edit:
I passed all day trying do put the autocomplete=off on all of my inputs to the browser stop asking password while someone is filling a form on my site, ddnt worked(a tried a few more things). And i thought in this type of solution i tried the javascript replace function but it only returned one char and decided to ask about a complete sequence of '*' while writing in a input. Tks for all the help.
sorry if i wasnt clear in the context i was just thinking in the code. i thought in some old i did before in C language but anyway i asked.
Edit:
I asked help how to do this in JS i did some stuff on keypress with JS functions like replace i did some code but i simply erased it and asked for some help. Next time i will post code to have some kick start code. I was doing something like
onkeypress="this.value=this.replace(this.value,'*')"
Tks in advance.
This is for in a visible input see a password typing and in a hidden i have it.
note: i want to avoid type="password"

Why do you need JavaScript to accomplish what HTML gives your for free? The element exposes all the same attributes/properties so you can still use it like a text box.
<input type="password">
If you feel you must reinvent the wheel, this can be done by using two fields. The user will type in the first and it will display the mask character and the actual key will be stored in a hidden input field for processing:
// Get references to DOM elements:
var txt = document.getElementById("txtMask");
var hdn = document.getElementById("pass");
// This keeps track of how many characters should be displayed
var maskLen = 1;
// Set up input event on first box
txt.addEventListener("keydown", function(evt){
// Manually put the right amount of mask characters into the box
// and update the maskLen value
var str = '#'.repeat(maskLen++)
this.value = str;
// Cancel the event and stop bubbling
evt.preventDefault();
evt.stopPropagation();
// Set the actual typed data into the hidden field
hdn.value += evt.key;
// Just for testing:
console.clear();
console.log("Actual data is: " + hdn.value);
});
<input type="text" id="txtMask" autocomplete="false">
<input type="hidden" id="pass">

Use type="password"
Like this:
<input type="password" id="TxtBox" runat="server" autocomplete="off" onkeypress="">
You can also do one of these:
input { -webkit-text-security: none; }
input { -webkit-text-security: circle; }
input { -webkit-text-security: square; }
input { -webkit-text-security: disc; /* Default */ }
You can use those without having a type="password"

HTML5 Chrome checkValidity onBlur

I'm trying to do a simple checkValidity of a numeric input field on blur, but can't get it to work properly. Does this work in Chrome yet? For instance:
<input onBlur="checkValidity()" type="number" name="x" id="x" min="64" max="2048" value=64>
or
<input onBlur="this.checkValidity()" type="number" name="x" id="x" min="64" max="2048" value=64>
Don't seem to do anything. However, in the console,
$("#x")[0].checkValidity()
does return true or false based on the current value in the input box and the limits above of (64,2048). Is this broken, or am I doing it wrong?

I realize this question is many years old at this point but if anyone else comes across it, the correct way to achieve the behavior that OP wanted appears to be to use onblur="reportValidity()" instead onblur="checkValidity".

This is a demonstration of what you may want to head to:
http://jsfiddle.net/9gSZS/
<input type="number" min="64" max="256" onblur="validate(this);" />
function validate(obj)
{
if(!obj.checkValidity())
{
alert("You have invalid input. Correct it!");
obj.focus();
}
}
Noted that I'm just demonstrating the concept here; alert may cause very unpleasant experience, so don't just copy it.
Use some floating DIV to attract your user, instead of the full-blocking alert.

You should use onChange Event
for example
var input1 = document.getElementById('txt_username');
input1.onchange = function(){
input1.setCustomValidity(input1.validity.patternMismatch ? 'username must match a-z,A-Z,0-9,4-16 character' : '');
}

Here is a solution
$("form").focusout(function(){
if(!$("form")[0].checkValidity()){
setTimeout(function(){$(":submit").eq(0).trigger('click');},0);
}
});
If any of your form elements lose focus you check the form validity. If the form is invalid have jquery click the first submit button. Have to use a timeout for some reason to get it to work. A timeout of zero just moves the function to the end of the queue of functions.

onblur="checkValidity()" has no effect because blur event is not cancelable.

Clear default values using onsubmit

I need to clear the default values from input fields using js, but all of my attempts so far have failed to target and clear the fields. I was hoping to use onSubmit to excute a function to clear all default values (if the user has not changed them) before the form is submitted.
<form method='get' class='custom_search widget custom_search_custom_fields__search' onSubmit='clearDefaults' action='http://www.example.com' >
<input name='cs-Price-2' id='cs-Price-2' class='short_form' value='Min. Price' />
<input name='cs-Price-3' id='cs-Price-3' class='short_form' value='Max Price' />
<input type='submit' name='search' class='formbutton' value=''/>
</form>
How would you accomplish this?

Read the ids+values of all your fields when the page first loads (using something like jquery to get all "textarea", "input" and "select" tags for example)
On submit, compare the now contained values to what you stored on loading the page
Replace the ones that have not changed with empty values
If it's still unclear, describe where you're getting stuck and I'll describe more in depth.
Edit: Adding some code, using jQuery. It's only for the textarea-tag and it doesn't respond to the actual events, but hopefully it explains the idea further:
// Keep default values here
var defaults = {};
// Run something like this on load
$('textarea').each(function(i, e) {
defaults[$(e).attr('id')] = $(e).text();
});
// Run something like this before submit
$('textarea').each(function(i, e){
if (defaults[$(e).attr('id')] === $(e).text())
$(e).text('');
})
Edit: Adding some more code for more detailed help. This should be somewhat complete code (with a quality disclaimer since I'm by no means a jQuery expert) and just requires to be included on your page. Nothing else has to be done, except giving all your input tags unique ids and type="text" (but they should have that anyway):
$(document).ready(function(){
// Default values will live here
var defaults = {};
// This reads and stores all text input defaults for later use
$('input[type=text]').each(function(){
defaults[$(this).attr('id')] = $(this).text();
});
// For each of your submit buttons,
// add an event handler for the submit event
// that finds all text inputs and clears the ones not changed
$('input[type=submit]').each(function(){
$(this).submit(function(){
$('input[type=text]').each(function(){
if (defaults[$(this).attr('id')] === $(this).text())
$(this).text('');
});
});
});
});
If this still doesn't make any sense, you should read some tutorials about jQuery and/or javascript.

Note: This is currently only supported in Google Chrome and Safari. I do not expect this to be a satisfactory answer to your problem, but I think it should be noted how this problem can be tackled in HTML 5.
HTML 5 introduced the placeholder attribute, which does not get submitted unless it was replaced:
<form>
<input name="q" placeholder="Search Bookmarks and History">
<input type="submit" value="Search">
</form>
Further reading:
DiveintoHTML5.ep.io: Live Example... And checking if the placeholder tag is supported
DiveintoHTML5.ep.io: Placeholder text

1) Instead of checking for changes on the client side you can check for the changes on the client side.
In the Page_Init function you will have values stored in the viewstate & the values in the text fields or whichever controls you are using.
You can compare the values and if they are not equal then set the Text to blank.
2) May I ask, what functionality are you trying to achieve ?

U can achieve it by using this in your submit function
function clearDefaults()
{
if(document.getElementById('cs-Price-2').value=="Min. Price")
{
document.getElementById('cs-Price-2').value='';
}
}