I'm trying to have a text input box that when you press keys on the keyboard it shows the ASCII codes underneath in a list. When you first click on the box the paragraph above is hidden. When you click away from the box I want the paragraph to reappear only if there is no list of codes underneath (nothing has been pressed or everything has been deleted).
I'm trying to check the list with "if (element.childNodes.length == 0)" but it's not working. Can anyone tell me where I'm going wrong?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<p id='press'>Press a key on the keyboard in the input field to get the Unicode character code of the pressed key.</p>
<input id="text" type="text" size=40 onkeypress="myFunction(event)" onkeydown="downFunction(event)">
<script>
function myFunction(event) {
var x = event.which || event.keyCode || event.charCode;
if(x >= 65 && x <= 90 || x >= 97 && x <= 122 || x == 32){
var element = document.getElementById('ul');
var fragment = document.createDocumentFragment();
var li = document.createElement('li');
li.textContent = String.fromCharCode(x) + ': ' + x;
fragment.appendChild(li);
element.appendChild(fragment);
};
};
function downFunction(event) {
var y = event.which || event.keyCode || event.charCode;
if( y == 8 ){
var element = document.getElementById('ul');
element.removeChild(element.lastChild);
};
};
$('#text').click(function(e){
$('#press').hide();
});
$('#text').focusout(function(e){
var element = document.getElementById('ul');
if (element.childNodes.length == 0) {
$('#press').show();
};
});
</script>
<ul id="ul">
</ul>
</body>
</html>
The reason your code doesn't work as expected is because you're using childNodes, which counts all child nodes of an element, including plain text. While there may not be any elements in your #ul, there is a text node. Note that:
<ul id = "ul">
</ul>
is differrent from:
<ul id = "ul"></ul>
To remedy your issue, use children instead, which returns an element-only collection that won't be affected by how you space your HTML code. The difference can be seen in the following snippet.
Snippet:
/* ----- JavaScript ----- */
var ul1 = document.getElementById("ul1");
var ul2 = document.getElementById("ul2");
console.log("ul1.childNodes: " + ul1.childNodes.length);
console.log("ul1.children: " + ul1.children.length);
console.log("ul2.childNodes: " + ul2.childNodes.length);
console.log("ul2.children: " + ul2.children.length);
<!------ HTML ----->
<ul id = "ul1">
</ul>
<ul id = "ul2"></ul>
Try to change your condition as below:
element.childNodes.length === 0 ||
(element.childNodes.length === 1 && !element.childNodes[0].tagName)
By this, you can control if a child is an actual dom node with a tagName
I'm really new in JavaScript and I would like to add to my input text, space insertion for IBAN account registering.
<input type="text" name="iban" onkeyup="if(this.value.length > 34){this.value=this.value.substr(0, 34);}" />
There is my input field; could someone tell me how I can do this?
The existing answers are relatively long, and they look like over-kill. Plus they don't work completely (for instance, one issue is that you can't edit previous characters).
For those interested, according to Wikipedia:
Permitted IBAN characters are the digits 0 to 9 and the 26 upper-case Latin alphabetic characters A to Z.
Here is a relatively short version that is similar to the existing answers:
document.getElementById('iban').addEventListener('input', function (e) {
e.target.value = e.target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();
});
<label for="iban">iban</label>
<input id="iban" type="text" name="iban" />
As stated above, the caveat is that you can't go back and edit previous characters. If you want to fix this, you would need to retrieve the caret's current position by initially accessing the selectionEnd property and then setting the caret's position after the regex formatting has been applied.
document.getElementById('iban').addEventListener('input', function (e) {
var target = e.target, position = target.selectionEnd, length = target.value.length;
target.value = target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();
target.selectionEnd = position += ((target.value.charAt(position - 1) === ' ' && target.value.charAt(length - 1) === ' ' && length !== target.value.length) ? 1 : 0);
});
<label for="iban">iban</label>
<input id="iban" type="text" name="iban" />
You will notice that there is a slight issue when the character after the caret is a space (because the space wasn't accounted for when initially retrieving the caret's position to begin with). To fix this, the position is manually incremented if the succeeding character is a space (assuming a space was actually added - which is determined by comparing the length before and after replacing the characters).
Using plain-JavaScript, I'd suggest:
function space(el, after) {
// defaults to a space after 4 characters:
after = after || 4;
/* removes all characters in the value that aren't a number,
or in the range from A to Z (uppercase): */
var v = el.value.replace(/[^\dA-Z]/g, ''),
/* creating the regular expression, to allow for the 'after' variable
to be used/changed: */
reg = new RegExp(".{" + after + "}","g")
el.value = v.replace(reg, function (a, b, c) {
return a + ' ';
});
}
var el = document.getElementById('iban');
el.addEventListener('keyup', function () {
space(this, 4);
});
JS Fiddle demo.
Somewhat belatedly, my rewrite of the above to handle strings, rather than DOM nodes:
function space(str, after) {
if (!str) {
return false;
}
after = after || 4;
var v = str.replace(/[^\dA-Z]/g, ''),
reg = new RegExp(".{" + after + "}", "g");
return v.replace(reg, function (a) {
return a + ' ';
});
}
var el = document.getElementById('iban');
el.addEventListener('keyup', function () {
this.value = space(this.value, 4);
});
JS Fiddle demo.
References:
addEventListener().
JavaScript regular expressions.
I wrote a simple function extending David's function to handle the last space. Also you can specify the separator.
function spacify(str, after, c) {
if (!str) {
return false;
}
after = after || 4;
c = c || " ";
var v = str.replace(/[^\dA-Z]/g, ''),
reg = new RegExp(".{" + after + "}", "g");
return v.replace(reg, function (a) {
return a + c;
}).replace(/[^0-9]+$/, "");
}
console.log(spacify("123123123131",4," "))
console.log(spacify("12312312313",4,"-"))
The code from Josh Crozie is really nice, but not complete.
Two issues with it;
If the caret is not at the end but e.g. at the before last position and the user starts typing, sometimes the caret doesn't stay at the before last position
Another issue is with Android 7+ devices. Those devices update the caret position slightly later, that means it needs a setTimeout() before reading the caret location
The code below is based on the code of Josh Crozie, now with the two issues mentioned above fixed and a little more verbose for readability purpose:
var isAndroid = navigator.userAgent.indexOf("ndroid") > -1;
var element = document.getElementById('iban');
element.addEventListener('input', function () {
if (isAndroid) {
// For android 7+ the update of the cursor location is a little bit behind, hence the little delay.
setTimeout(reformatInputField);
return;
}
reformatInputField();
});
function reformatInputField() {
function format(value) {
return value.replace(/[^\dA-Z]/gi, '')
.toUpperCase()
.replace(/(.{4})/g, '$1 ')
.trim();
}
function countSpaces(text) {
var spaces = text.match(/(\s+)/g);
return spaces ? spaces.length : 0;
}
var position = element.selectionEnd;
var previousValue = element.value;
element.value = format(element.value);
if (position !== element.value.length) {
var beforeCaret = previousValue.substr(0, position);
var countPrevious = countSpaces(beforeCaret);
var countCurrent = countSpaces(format(beforeCaret));
element.selectionEnd = position + (countCurrent - countPrevious);
}
}
<label for="iban">iban</label>
<input id="iban" type="text" name="iban" size="35" />
You have to capture each group of 4 digits and then put a space between each group.
$('input').blur(function () {
//Replace each group 4 digits with a group plus a space
var reformat = this.value.replace(/(\d{4})/g, function(match){
return match + " ";
});
this.value = reformat;
})
And this one updates the element while typing
//Keys pressed 0 times
var downed = 0;
$('#test').keydown(function (g) {
if(g.code.match("^Digit")){
downed++;
console.log(g)
}
if(downed == 1){
var reformat = this.value.replace(/(\d{4}\s*)/g, function(match){
//Strip spaces
if(match.match(/\s/)){return match;}
return match + " ";
});
console.log(reformat);
this.value = reformat;
//Start recount
downed = 0;
}
});
Check out the fiddle
for thousands on angular 4 in a pipe
integer = integer.replace(/[^\dA-Z]/g, '').replace(/(.{3})/g, '$1.').trim();
I need the same but for BVR/BVR+ swiss payment form.
So what I need is add a space every 5 chars but from the end of the string.
Example : "52 86571 22001 00000 10520 15992" or sometimes shorter like "843 14293 10520 15992".
So, here is the solution by reversing the string before and after adding spaces if rev=1.
function space(str, stp, rev) {
if (!str) {
return false;
}
if (rev == 1) {
str = str.split('').reverse().join('');
}
if(stp > 0) {
var v = str.replace(/[^\dA-Z]/g, ''),
reg = new RegExp(".{" + stp + "}", "g");
str = v.replace(reg, function (a) {
return a + ' ';
});
}
if (rev == 1) {
str = str.split('').reverse().join('');
}
return str;
}
Use :
var refTxt = space(refNum, 5, 1);
EDIT : PHP version added
function space($str=false, $stp=0, $rev= false) {
if(!$str)
return false;
if($rev)
return trim(strrev(chunk_split(strrev($str), $stp, ' ')));
else
return trim(chunk_split($str, $stp, ' '));
}
document.getElementById('iban').addEventListener('input', function (e) {
e.target.value = e.target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();
});
<label for="iban">iban</label>
<input id="iban" type="text" name="iban" />
This is the shortest version using JQuery on input with type number or tel:
$('input[type=number], input[type=tel]').on('input', function (e) {
e.target.value = e.target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();
});
You can also change the 4 to any other character limit you want.
onChangeText={number => {
const data =
number.length % 5 !== 4
? number
.replace(/[^\dA-Z]/g, '')
.replace(/(.{4})/g, '$1-')
.trim()
: number;
this.setState({
...this.state,
card: {...this.state.card, number: data},
});
}}
If you are trying to use for text input to adjust with credit card then this method will help you solve the backspace problem too
To Add space after 4 Digits
Useful to validate IBAN Number
document.getElementById('IBAN').addEventListener('input', function (e) {
e.target.value = e.target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();
});
<label for="IBAN">IBAN</label>
<input id="IBAN" maxlength="14" type="text" name="IBAN" />
i have put together the undermentioned script. it wont output the last character of the last source. i am not very well concerned with js and that is why i ask you. can anyone give me a clue?
function jtype(source, step){
var str = source, i = 0, isTag, text, all = "", ii = 0, totallength = 0;
for(ii = 1; ii < step; ii++){
all = all + $("#source-" + ii).val();
}
(function type() {
text = str.slice(0, ++i);
if (text === str) return;
$(".steps").html(all + text);
var char = text.slice(-1);
if( char === '<' ) isTag = true;
if( char === '>' ) isTag = false;
if (isTag) return type();
setTimeout(type, 20);
}());
}
this is an example-data-source:
<input type="hidden" class="sources" id="source-1" value="Gesetzliche Zinsen gebühren kraft Gesetzes. ">
<input type="hidden" class="sources" id="source-2" value="Der gesetzliche Zinssatz beträgt nach <a href="#" onclick="dofadein('#norm330')">§ 1000 Abs 1 ABGB</a> 4 Prozentpunkte pro Jahr. ">
<input type="hidden" class="sources" id="source-3" value="Gesetzliche Zinsen sind insb die sog Verzugszinsen nach <a href="#" onclick="dofadein('#norm430')">§ 1333 ABGB</a>.">
in this example it wont output the dot at the end of #source-3.
when i make an alert(source) right in the function jtype() the dot is NOT missing.
the other thing i want to know is. how can i determine the end of the output. i mean: how can i determine if the cycling is finished and the last character has been output?
thank you very much for your help and please excuse my bad english.
The problem seems to be that when the text === str you return before updating the element so the last character never gets inserted
Change:
if (text === str) return;
$(".steps").html(all + text);
To:
// update element before ending
$(".steps").html(all + text);
if (text === str) return;
DEMO
I have a form where people can add more input with a button.
The javascript function clones the "origin-item", but I can't seem to get the function to correctly update the value in #id_nested-TOTAL_FORMS and __prefix__ does not get replaced with a counter-number, It just copies and adds __prefix__ instead of 1 or 2 and so on.
Anyone know what is wrong with the function?
The script was found here: https://github.com/rotaris/dynamicformdjango/blob/master/todo/templates/edit_items_in_list.html
<input id="id_nested-TOTAL_FORMS" name="nested-TOTAL_FORMS" type="hidden" value="1">
<input id="id_nested-INITIAL_FORMS" name="nested-INITIAL_FORMS" type="hidden" value="0">
<input id="id_nested-MAX_NUM_FORMS" name="nested-MAX_NUM_FORMS" type="hidden" value="1000">
<div id="origin-item" class="hide item">
<div id="div_id_nested-__prefix__-name">
<label for="id_nested-__prefix__-name">Name</label>
<div class="controls col-lg-10">
<input id="id_nested-__prefix__-name" name="nested-__prefix__-name" type="text" />
</div>
</div>
<p><a id="add-new-item" href="#">Add new person</a></p>
<script type="text/javascript">
var prefix = 'nested';
var MAX_FORMS = '1000';
var MIN_FORMS = 1;
/*
* Perform any enhancements you'd like to a given item here
* e.g. add datepicker widgets, popovers etc.
*/
function enhanceItem(item) {
$('.btn.delete', item).popover({
offset: 10
});
}
function enhanceItems() {
$('.item').each(function() {
enhanceItem(this);
});
}
/*
* The opposite of enhanceItem()
*/
function diminishItem(item) {
$('.btn.delete', item).unbind();
}
function diminishItems() {
$('.item').each(function() {
diminishItem(this);
});
}
$(document).ready(function() {
enhanceItems();
});
function getFormCount() {
return parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());
}
function updateFormCount(newValue) {
$('#id_' + prefix + '-TOTAL_FORMS').val(newValue);
}
/*
* ====================================================
* General Notes: 'Form' and 'Item' are used somewhat interchangeably.
* ====================================================
*/
$.fn.clearForm = function() {
return this.each(function() {
var type = this.type, tag = this.tagName.toLowerCase();
if (tag == 'form')
return $(':input',this).clearForm();
if (type == 'text' || type == 'password' || tag == 'textarea')
this.value = '';
else if (type == 'checkbox' || type == 'radio')
this.checked = false;
else if (tag == 'select')
this.selectedIndex = -1;
});
};
/*
* Given an element, this function replaces a given string/regex
* with another specified replacement (new_value) within the element
*/
function updateElement(el, target_regex, replacement) {
var id_regex = target_regex;
if ($(el).attr("for")) {
$(el).attr("for", $(el).attr("for").replace(id_regex, replacement));
}
if (el.id) {
el.id = el.id.replace(id_regex, replacement);
// Update the value of the hidden ID
// This hidden ID represents the ID of the model instance
var hidden_ID_patt = new RegExp('id_(' + prefix + '-\\d+)-id');
// Only update if an ID exists (i.e. if a corresponding model instance exists)
if (hidden_ID_patt.test(el.id)) {
$(el).val(new_value + 1);
}
}
if (el.name) {
el.name = el.name.replace(id_regex, replacement);
}
}
/*
* Given an element, this function replaces (the first?) occurence of a number
* that follows a specific prefix (e.g. 'exampleprefix-n')
* with another specified number (new_value) within the element
* where n is a number
*/
function updateElementIndex(el, prefix, new_value) {
var id_regex = new RegExp('(' + prefix + '-\\d+-)');
var replacement = prefix + '-' + new_value + '-';
updateElement(this, id_regex, replacement);
}
function reapplyEnhancements() {
// Apply some fresh enhancements
diminishItems();
enhanceItems();
}
/*
* btn = the button (or link or some source object) that instigated this action
* prefix = the prefix used in the formset (?)
*/
function addItem(btn, prefix) {
var formCount = getFormCount();
// You might like/want to do some validation before proceeding in this function
// i.e. before adding an item
// In this case, I'm limiting it to max number of forms
if (formCount < MAX_FORMS) {
// Clone a item (without event handlers) from the first item
//var item = $(".item:first").clone(false).get(0);
// Clone the origin item
var item = $("#origin-item").clone(false).get(0);
$(item).removeAttr("id");
$(item).removeClass("hide");
// Clear its values
$(':input', item).clearForm();
// Insert it after the last item
$(item).removeAttr('id').hide().insertAfter("form .item:last").slideDown(300);
$(':input, label', item).each(function() {
// Relabel/rename all the relevant bits
// '__prefix__' comes from #origin-item
// see 'empty_form': https://docs.djangoproject.com/en/1.4/topics/forms/formsets/#empty-form
var target_regex = new RegExp('(' + prefix + '-__prefix__-)');
var replacement = prefix + '-' + formCount + '-';
updateElement(this, target_regex, replacement);
// Remove error classes
$(this).removeClass("error");
});
reapplyEnhancements();
// Update the total form count (in the management form)
updateFormCount(formCount + 1);
}
else {
// Feel free to notify the user using some other technique instead of an JS alert
alert("Sorry, you can only have a maximum of " + MAX_FORMS + " goals.");
}
}
/*
* Relabel all items
*/
function relabelItems() {
var forms = $('.item'); // Get all the forms
// Update the total number of forms (likely 1 less than before)
$('#id_' + prefix + '-TOTAL_FORMS').val(forms.length);
var i = 0;
// Go through the forms and set their indices, names and IDs
for (formCount = forms.length; i < formCount; i++) {
$(":input, label", forms.get(i)).each(function() {
updateElementIndex(this, prefix, i);
});
}
}
/*
* Removes an item from a list of items
*/
function removeItem(btn, prefix) {
var formCount = getFormCount();
// Do some validation before proceeding
// In this case, just make sure there is at least one item
if (formCount > MIN_FORMS) {
var item = $(btn).parents('.item');
// Delete the item
$("*", item).fadeOut();
$(item).animate({'backgroundColor':'#fb6c6c'}, 300).slideUp('slow', function() {
$(item).remove();
relabelItems();
});
// Apply enhancements
enhanceItems();
}
else {
// Feel free to notify the user using some other technique instead of an JS alert
alert("Come on now, you need to have at least a minimum of " + MIN_FORMS + " item(s).");
}
}
// JavaScript to create a new items/entries
$(document).ready(function() {
$('#add-new-item').click(function(e) {
addItem(this, prefix);
return false;
});
$('a.delete').live("click", function(e) {
removeItem(this, prefix);
return false;
});
});
</script>
The bugs in this code seem to be caused by the variable named prefix being used for 2 different tasks.
Here it is used like this
$('#id_' + prefix + '-TOTAL_FORMS').val(newValue);
where I assume prefix is assigned '_prefix_', but later it is used like this
var target_regex = new RegExp('(' + prefix + '-__prefix__-)');
where I assume prefix is assigned 'id'
If you where to sort out the variable prefix to only contain one type of piece of information, by have 2 variables with different names.
I'm pretty sure everything would fall into place.
I use the jstree search plugin (documentation) to search for multiple IDs in the title fields of my HTML tree.
I took the original jstree code (line 3398) and changed it as suggested here to enable multi word searching in the title fields of the tree.
It works fine for "title contains" queries (e.g. title ID:40857332 of node x and title ID:408 of node y contain the search word ID:408) but I'm at loss how to change the code in order to find only exact matches (e.g. title ID:408 of node y matches the search word ID:408 exactly).
The function gets called like this:
$("#my_html_tree").jstree("search", search_words);
with the following configurations:
"search" : {"case_insensitive" : true, "search_method": "jstree_title_contains_multi"}
The variable "search_words" is a string containing several IDs:
var search_words = "ID:4 ID:7 ID:3188";
The format of the HTML tree nodes:
<li id="3188"> <a title="ID:3188">Tree node 3188</a></li>
This is my changed code:
$.expr[':'].jstree_title_contains_multi = function(a,i,m){
var word, words = [];
var searchFor = m[3].toLowerCase().replace(/^\s+/g,'').replace(/\s+$/g,'');
if(searchFor.indexOf(' ') >= 0) {
words = searchFor.split(' ');
}
else {
words = [searchFor];
}
for (var i=0; i < words.length; i++) {
word = words[i];
if((a.getAttribute("title") || "").toLowerCase().indexOf(word) >= 0) {
return true;
}
}
return false;
};
How must I change the code in order to enable searching only for exact matches?
Any help would be greatly appreciated.
I found the following solution:
Instead of using
if((a.getAttribute("title") || "").toLowerCase().indexOf(word) >= 0)
I use
if((a.getAttribute("title") || "").toLowerCase() === word )
It's cleaner to use the id attribute and not the title. You can even use both.
Configuration:
"search" : {"case_insensitive" : true,
"search_method": "jstree_codigo_descripcion"}
Search call
var codigo = "0102";
var descripcion = "sdf";
jQuery("#arbol").jstree("search",cod +"-"+ desc);
Tree
<div id="arbol">
<ul>
<li><a>01</a>
<ul>
<li><a>0101</a>
<ul>
<li><a id="010101" title="foo">010101 foo</a></li>
<li><a id="010102" title="bar">010102 bar</a></li>
</ul>
</li>
<li><a>0102</a>
<ul>
<li><a id="010201" title="asdf">010201 asdf</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
The new search function
$.expr[':'].jstree_codigo_descripcion = function(a, i, m) {
var searchFor = m[3].toLowerCase();
var params = searchFor.split('-');
var codigo = params[0];
var descripcion = params[1];
// attribute id start with codigo
// attribute title contains descripcion
if (codigo.length > 0 && descripcion.length === 0) {
if ((a.getAttribute("id") || "").toLowerCase().indexOf(codigo) === 0) {
return true;
}
}
if (codigo.length === 0 && descripcion.length > 0) {
if ((a.getAttribute("title") || "").toLowerCase().indexOf(descripcion) >= 0) {
return true;
}
}
if (codigo.length > 0 && descripcion.length > 0) {
if ((a.getAttribute("id") || "").toLowerCase().indexOf(codigo) === 0 &&
(a.getAttribute("title") || "").toLowerCase().indexOf(descripcion) >= 0) {
return true;
}
}
return false;
};