Understanding when an input box has bean cleared and new input inserted - javascript

I am using jQuery autocomplete with multiple input boxes interconnected, i.e. when inserting some value in the first input box and losing focus, the following input boxes get affected (i.e. values are filtered accordingly). Then I can focus and another input box and start typing some value, so that I get both filters applied (typed value and according to previous input box value).
Also, I setup an event for cleaning ALL input boxes when deleting all characters from an input box:
if (inputBoxTrigger.val().length == 0 && (event.keyCode == BACKSPACE || event.keyCode == DELETE)) {
jQuery.each(inputObjectArray, function (i, obj) {
obj.val("");
});
}
So, I cleanup everything when I just removed last character in the current input box. However, I could do the following:
1) Select the content of an input box (e.g. via mouse or holding shift)
2) Start typing something in this input box without pressing backspace or delete buttons
In this case, the input box gets cleared and a new character is inserted, but I do not catch this situation.
I attempted to drop the check on the backspace/delete button keyCode, but is does not work: when leaving an input box, the new input box is empty, so I just clean up everything (including previous input boxes).
Any ideas?

Maybe a more complex algorithm to detect string similarity?
If strings are very similar then it may be a simple correction, if not then it may be a completely different item and you may reset the form. You can also chain a length/direction comparison with a similarity comparison to fine tune it (i.e. do the similarity comparison only when going from a long string to another long string, ...).
On string similarity:
Compare Strings Javascript Return %of Likely
javascript text similarity Algorithm
http://andrew.hedges.name/experiments/levenshtein/

Related

Copying text from one textarea element to another in real-time

I want to copy input from one textarea to another textarea in real-time. This is not a HTML editor or rich text editor. Just plain simple text without any markup.
This is what I am doing:
a. I can detect the point at which the cursor was clicked in the source text area using the following (on mouseup)
$("#txt1")[0].selectionStart)
b. I can detect the text selection using selectionStart and selectionEnd properties on mouseup.
This allows me to keep track of delete to be reflected in the other textarea. That is if delete is the key pressed, and a selection was made I know what was deleted to be relected in the target text area.
c. Where I am stuck is the simple issue of new characters entered. I think keeping track of key pressed would be the inefficient approach as I would have to check if control, alt, shift keys, among others were also held down. Besides there is the issue of repeatedy keys presses. The efficient way is possibly to get the characters actually entered from the source text area and NOT based upon key pressed.
Questions:
How do I get characters entered in the source textarea?
Is there a better way to update the target textarea in real-time? One way will be to continually update the content from the source to the target at regular interval but that would be inefficient. Any other approach?
I am open to using a contentEditable div in place of a textarea.
I need a solution that can work across different device types.
How do I get characters entered in the source textarea?
Just handle the input event of the first textarea and make the second textarea have the same value as the first.
let two = document.getElementById("two");
document.getElementById("one").addEventListener("input", function(){
two.value = this.value;
});
<textarea id="one"></textarea>
<textarea id="two"></textarea>

HTML input box, how to prevent key repeat when key is held down

Is there a way to prevent auto-repeat behavior in an HTML input (type="text")?
So that when you hold down the a key while in the input box, only one character is used, instead of repeating the character until the user releases the key.
I know how to do this for key-events in the browser but HTML input type="text" boxes seems to be in a world of their own.

Achieving dependency on the Shuttle value in Oracle Apex

Good evening!
I'm making a page in Oracle Apex, which leads to creating a document. This page has many fields like "text field" or "select list" and so on with its own logic, and I've got stuck with two ones - the shuttle field (let it be named A) and the text field (let it be named B), which should depend on the first one. The scheme of their interaction is this:
Shuttle A has values "A", "B", "C", "D" and "others";
If one chooses value "others" among others from the shuttle, one also should fill the text field B. In other words, in this case field B should be required.
The problem I have is that I can't make the field B to behave depending on field A values. I've already tried to use JavaScript function triggering from "onChange" event, which should have been working, if the right half of the shuttle B had got "others" value. But this way didn't work as I wanted, because "onChange" event arises on every click on both halfs of shuttle, and I need to have it arosen only on moving the value "others" (what can be done in two ways: on double click or due to click on arrow icon on shuttle).
So the question is: how to synchronize shuttle and text field in "master-detail" logic?
p.s. I'm using Oracle Apex 4.2.6.0003. Also I know that I can have a workaround, using only select lists, but I'd like to try to solve the problem with using shuttle, especially considering that the last one could have almost infinite count of values.
With static values as list of values for shuttle:
STATIC:A;A,B;B,C;C,Others;OTHERS
Using jvascript code like this:
$("#P40_SHUTTLE").change(function(){
console.log(apex.item(this).getValue().indexOf("OTHERS") != -1);
})
Will return true when OTHERS has been selected (it is in the values of the shuttle). Change is the correct event to listen for here!
Translating that to a DA:
On change of the shuttle
Use the "When" condition of type "JavaScript expression" and use this code:
apex.item(this.triggeringElement).getValue().indexOf("OTHERS") != -1
You can then use the True and False actions of the DA to for example show and hide the text field as required. I'd not go further than that on the front end. Maybe show a required label for the textfield, as it'll only get shown when the field is shown.
Add a server side validation (on submit) on the textfield where you'll inspect the shuttle values for the existence of the OTHERS value. If it's present, then the text field should be required.
Validation created on the textfield.
Condition of type "PLSQL Function Body"
DECLARE
l_vc_arr2 APEX_APPLICATION_GLOBAL.VC_ARR2;
BEGIN
l_vc_arr2 := APEX_UTIL.STRING_TO_TABLE(:P40_SHUTTLE);
FOR z IN 1..l_vc_arr2.count LOOP
IF l_vc_arr2(z) = 'OTHERS' THEN
RETURN TRUE;
END IF;
END LOOP;
RETURN FALSE;
END;
Type of the validation: IS NOT NULL
Item: the text field.
The validation will only fire when others is present in the selected values, and then will require the text field to be required.

Send keycode as input to another textarea

I have two textarea elements. I want to mirror the input given to one text area which has focus to another textarea. Please note that this is not equivalent to copying the values, since one textarea may already have some input which I do not want to copied. Thus only the input given to text area should be forwarded onto second textarea.
Something on the lines of:
$('#textarea1').keyDown(function(e) {
textarea2.sendCommand(e.keyCode)
});
Is something like this available in javascript?

javascript/jquery input validation

I have form where a user can add more input boxes on button click.
User can have as much input boxes as they want.
I do not plan to add a button for removing fields.
They default number of input boxes is 2.
Say the user decides to add 3 more, now there are a total of 5.
For validation, I would like to check if the input box is empty or if the input has all spaces like: " " no matter how many spaces as long as it has nothing else but space.
I can do the check for an empty input by checking length, but how can I check for the latter?
Is there a regular expression for any number of consecutive spaces?
Thanks!
PS: I am using jQuery with jQuery mobile
You can check if an input field is blank by checking its .value.length, as you already know. To check if it only contains whitespace, then try this: (assuming that the input is stored in a variable called input)
if (!input.value.trim().length) // oh noes! it's blank or whitespace-filled!
Reference.
Your question has a few components:
how to add input fields dynamically?
how to loop through these fields and validate them as well?
how to check whether a field really contains content, not just empty values?
We need to address all of these issues in a systematic manner:
Starting with the easiest - detecting empty string:
if (value.replace(/\s/g,'')=='') //string is empty
Next, to add input fields dynamically:
var myinput=document.createElement('input');
document.body.appendChild(myinput);
//the trick here is to "remember" this element for later use
document.myinputs=[];
document.myinputs.push(myinput);
To check all your input fields, you check the static ones first, then loop through the dynamic input fields:
valid=true; //default to true unless detected otherwise
for (var i=0;i<document.myinputs.length;i++){
var input=document.myinputs[i];
if (input.value.replace(/\s/g,'')=='') valid=false;
}
alert(valid);

Categories

Resources