Split into separate fields an input text - javascript

I'm having a trouble when i try to force the user to enter data to a text input. I need to do something like the IP Address input in Windows.
I want to split the text input by dashes having something like this
10 - 10 - 10 - 10
Is there any way to do this ?

http://jsfiddle.net/87dug9oa/1/
function check(text) {
var result = [];
text = text.replace(/[^\d]/g,"");
while (text.length >= 3) {
result.push(text.substring(0, 3));
text = text.substring(3);
}
if(text.length > 0) result.push(text);
$("#ip").val(result.join("-"));
}
$("#ip").on("keyup", function() {
check($(this).val());
});
This creates a function, which adds dashes once 3 characters has been added (and the fourth is written).
Now, this does do what you want, but you need to add some additional stuff, such as checking for length and making the remove part work (because when you press any key, it will change the input's value, which will make the caret move to the last character).
Oh I almost forgot. This can be changed to the length of your choice, of course. Just change the "3" to be something else.

Related

Implement a text highlighting feature in javascript

I have a task to create API using ExpressJS that will manage highlights which will be made on the frontend. How can I keep track of my highlighted text if someone updates a part of the text?
I was keeping the three starting and ending characters of the highlighted text. But a problem is, how will I manage those characters if the text is edited.
const { textH, allText } = req.body;
let chars = { };
const enclosingChars = (hLighted, theString) => {
let startingChars = null, endingChars = null;
const index = theString.indexOf(hLighted);
const last3 = index + hLighted.length;
if ((index - 3) > -1) startingChars = theString.substring(index - 3, index);
if ((index + 3) <= theString.length) endingChars = theString.substring(last3, last3 + 3);
return { startingChars, endingChars };
};
if (allText.includes(textH)) {
chars = enclosingChars(textH, allText);
}
chars.hLighted = textH;
If a part of the highlighted text is edited, I will delete the highlighted in my storage. If not, I want to check if my starting and ending characters have changed, then I change them accordingly.
But I don't know how to get that highlighted text if its index changed
so it will be not as easy as you think if you consider keeping track of edits outside of the highlighted text.
the text might contain more than one similar phrase/word (to the highlighted)
the newly inserted phrase might be similar to the highlighted one (worse if before the main one in terms of indices)
so if any of the above scenarios happens the indices will be of no use because you can fall to the wrong text
Do the following
a. when highlighting keep the following
1. the content : to make sure if the edit happens in there, you know it and you can act accordingly
2. keep track of the index range of your text even in case the shift is required (when the text before it is edited)
3. take a screenshot of the entire article and store it so that when an edit to the article happens you know exactly which part is edited. this will require to check word by word and see if any word in the new text is different from the word of the same index in the old (screenshot). and you can shift the ranges of the highlighted text accordingly.
Remember any edit that happens after the highlighted text is innocuous.
Hope this helps.

How to always show the number prefix in html input field?

Is there any smart, minimalistic way to always show the prefix (positive, negative) of a number in a HMTL input field? (e.g. +1, 0, -1)
I have only found s solution for PHP:
How to prefix a positive number with plus sign in PHP
I have to use <input type="text"> since there are different implementations for text=number in different browsers: Localization of input type number
Why am I doing this?
I have an input field that shows the percentage that can be added (or subtracted) to a certain value.
Basevalue: 10
Mofification %: +10
Results: 11
The easiest way would be using some basic javascript. Add a script at the end of your HTML page (before the body closing tag) then give to the input an id, for example prefixedInput. Then you can write your little script
var inputField = document.getElementById("#prefixedInput");
var inputFieldValue = inputField.value;
if (inputFieldValue > 0) {
inputField.value = "+" + inputFieldValue;
}
if (inputFieldValue < 0) {
inputField.value = "-" + inputFieldValue;
}
Now, that works in a way that isn't really useful because this function will be executed just one time when the page will load, so if you have assigned to your input a value, this will be prefixed with its sign. However if you want to bind this behaviour to some actions (e.g. prefixing the value even if the user inserts the value after the intial page load) you will be forced in using event listeners.

Slip input type value live using javascript

i'm trying to live edit a text box value so that the result will be split every two character,
adding a column and starting from some default character.
what i have till now is this code, that obviously doesn't work:
$('#textboxtext').keyup(function (){
var text = $("#textboxtext").val();
//$(text).attr('maxlength', '12');
var splitted = text.match(/.{2}|.{1,2}/g);
var result = ("B8:27:EB:" + splitted.join(':'));
});
i need the live split and the default character inside the textbox but i really don't know where to start...
From your code, it seems like you're trying to create a text box that has some very specific behavior. It looks like it needs to format its value in such a way that it always begins with certain 'prefix' of B8:27:EB:, and every subsequent pair of characters is is separated by a :. This is actually a very complex behavior and you have to consider a number of different interactions (e.g. what happens when the user attempts to delete or modify the prefix). I usually try to avoid such complex controls if possible, however here is a quick implementation:
$('#textboxtext').keyup(function (e){
var prefix = "B8:27:EB:",
text = $(this).val(),
splitted, result;
if (text.indexOf(prefix) == 0)
text = text.substr(9);
else if (prefix.indexOf(text) == 0)
text = "";
text = text.replace(/:/g, '');
splitted = text.match(/.{1,2}/g) || [];
result = prefix + splitted.join(':');
$(this).val(result);
});
Demonstration
Type inside the text box and see what happens. Also note, there are all kinds of interaction that this implementation doesn't account for (e.g. right-clicking and pasting into the text box), but it's a start.

Instantaneous word counter

I'd like to add a word counter to a large text box (think blog editor) that increments with every word that I enter. (i.e. after I type "Hello" it would increment from 0 to 1 and after I write "world" after that it would increment to 2). I'd like to do this within a webpage but I'm happy to consider other options.
I have no idea how to do this. I think there would be a way to do this with Javascript but I know next to nothing about Javascript.
Could someone point me in the direction of figuring out how to do this?
I think a good idea to implement this is to check inputed letter (for example, onKeyUp event). If previous character was non-space and current is not a letter, then increment count. Detail: if previous character is non-letter, increasing should not be done (double spaces e t.c.)
When user is pressing Backspace or Delete key, similar check should be done. Key codes you can find here
The difficult thing with this counting 'on the fly' is to check 'non-key' input. For example, user can use Ctrl+Insert combination to copy data from clipboard, or select text in the textbox and then press Del key. That should be handled separately if there is real need to avoid whole value processing (which could be really huge)
Use this functionality on the onkeyup event for the textbox.
document.getElementById("inputbox").addEventListener("keyup",function(e){
// Get the inputs text.
var inputVal = e.srcElement.value;
var counter = 0;
// Check input isn't empty.
if(inputVal){
// Count individual letters.
var wordlist = inputVal.split(" ");
for(var i=0;i<wordlist.length;i++)
if(wordlist[i])
counter = counter+1;
}
// Then set your counter element.
document.getElementById("counter").value = counter;
});

Check value of starting characters of an input Jquery

I have a text field that can accept input of any kind. Based on the input, I need to make some fields hidden and others unhidden. However I want to put another condition within the first condition to check for the first 3 characters of the input value
Here is my code for the first condition:
$("#accountcodes").live("focusout",function(){
var code = $(this).val();
if(code>30000){
alert("T1 to T4 codes needed");
$(this).parents("tr").find('#T1').removeAttr('hidden','hidden');
$(this).parents("tr").find('#T2').removeAttr('hidden','hidden');
$(this).parents("tr").find('#T3').removeAttr('hidden','hidden');
$(this).parents("tr").find('#T4').removeAttr('hidden','hidden');
}
})
I want to put another condition within the if statement(if within an if) to check if the first 3 characters start with 310 or 311 then do something else e.g if a user inputs 31102, then another field is unhidden e.t.c I am not sure how to do that in Jquery. should I use regex? do I take the value of input and cut out the first three characters and check it?
Any help will be appreciated
So you just want to know about substr()? code.substr(0,3) would get you the first three characters.
Alternatively, you may want to use a regex to find 310 and 311 more easily, in which case you want code.match(/^31[01]/) instead.
var code = $(this).val();
var firstThreeChars = code.substr(0, 3);
It seems your values will always be numeric. You don't need much jquery to achieve this.
$("#accountcodes").live("focusout",function(){
var code = $(this).val();
if(code > 30000){
//Note: For any non-numeric value, this condition will always be false
alert("T1 to T4 codes needed");
var p = $(this).parents("tr");
p.find('#T1, #T2, #T3, #T4').removeAttr('hidden');
if ((code - 31000) > 102){ // Your other condition check can look like this
// unhide other fields
}
}
});
Hope this will help. Happy Coding.
Your Question have your answer you can do it many ways
Sub-string the value and check the value.
2.go for contains key word of jquery [ api.jquery.com/contains-selector/][1]

Categories