So, I know how to detect when a user has changed the text on a input field (including typing, pasting, and other means)...
But for my purpose, I need to know exactly what was changed in the text field.
For example, initially, the text field contains this:
This is a text
Then the user changes it to this:
This is my text
The script should return this to me: text position from 8 to 9 was changed to my.
So is there an easier way to do this without having to use a difference checker algorithm? Because it seems that if I put an event for keyup, I can detect what position was changed or deleted, but this won't detect the whole text pasted from Ctr+V. Anyways, I need a fast way to send the differences in a text to synchronize it with the database on the server using AJAX, kinda like Google Docs, but I feel like resending the whole text field every so on and then is very inefficient, mainly because the user may be editing a very large text field.
Try this:
<script>
$(document).ready(function(){
var inival=$("#myinput").val();
$("#check").click(function(){
$("#log").empty();
var newval=$.trim($("#myinput").val());
var splitval=newval.split(' ');
for(var i=0; i<splitval.length; i++){
if(inival.indexOf(splitval[i])<0){
var charindex=newval.indexOf(splitval[i]);
$("#log").append('text position from '+charindex+' to '+(charindex+1)+'
was changed to '+splitval[i]+'<br>');
}
}
});
});
</script>
<input type="text" value="This is a text" id="myinput"><input type="button"
value="Check" id="check"><br>
<div id="log"></div>
jsfiddle
Related
I have a form where I want the user to be able to enter data into the text field, but then I want this to be entered into the span tags live as they are typing each character.
I have managed to do this successfully with one input field going to one span tag using most of the javascript in this post. But changing it slightly to try and accomodate multiple input fields to multiple span tags.
But I can't seem to get this to work when I have multiple text fields that I want to live update to multiple span tags. For example:
I want this input to live update to the below span tag:
<input type="text" class="inst_name">
<span class="nametag"></span>
and I want this input to live update this span tag:
<input type="text" class="keypair_name">
<span class="keyname"></span>
But when I do, it works with the first one (the inst_name to nametag) but when I try it with the second one (keypair_name to keyname) it keeps showing up in my html as undefined where the text should be live updating to but the code doesn't actually produce any errors.
Below is the JavaScript code I have tried:
var inputKeyName = document.querySelector(".keypair_name"),
outputKeyName = document.querySelector(".keyname"),
inputInstName = document.querySelector(".inst_name"),
outputInstName = document.querySelector(".nametag");
function keydownHandler() {
outputKeyName.innerHTML = inputKeyName.value;
}
function keydownHandlerInstName() {
outputInstName.innerHTML = inputInstName.value;
}
inputKeyName.addEventListener("input", keydownHandler);
inputInstName.addEventListener("input", keydownHandlerInstName);
Any ideas on how I can get this to work would be much appreciated. Thanks
So I have found out the problem. A rookie mistake of using the same name twice in my html. I had used the same name for a class name of "inst_name" for my input field as well as a div elsewhere in my code that I didn't realise were named exactly the same. Thanks for commenting and confirming this was working.
I have been trying already all kind of code snippets in Chrome Dev tools on this website:
http://kiwisdr.sk3w.se:8073/?#
This is a software defined radio running on a webserver.
I would like to use Javascript to set the frequency (and submit) so that I can change the frequency the receiver is currently tuned to.
Manually on the GUI the user can just type a frequency (with or without enter) and the new frequeny inside the input box will be tuned.
This is the HTLM part of the website containing the input (no ID or name, so I am not sure how to properly adress this):
<form id="id-freq-form" name="form_freq" action="#" onsubmit="freqset_complete(0); return false;">
<input class="id-freq-input w3-input w3-border w3-hover-shadow" style="padding:0 4px;max-width:74px" size="8" onkeydown="freq_keydown(event)" onkeyup="freqset_keyup(this, event)" type="text" value="" onchange="w3_input_change('undefined', 'undefined')">
</form>
I managed to set the frequency, but I am stuck on how to make it submit.
This is the code I used to set the frequency input box to a certain value (1234.50):
targetForm = document.forms['form_freq'];
targetForm.elements[0].value = '1234.50';
I already tried to trigger the keydown, keyup or change events using some snippets I found, but I am not sure I adress the right elements in the form with it.
All I want to do is to mimic a user entry by code :-)
Could someone point me into the right direction by having a look on the way how the input works on this website and how I can make the website update the currently received frequency with javascript?
Thanks.
Short answer:
freqset_keyup(document.forms[1][0], null)
Nicer answer:
function change_freq(new_freq) {
var form = document.forms['form_freq'];
var freq_input = form.elements[0];
freq_input.value = new_freq;
freqset_keyup(freq_input, null);
}
change_freq(1234.50)
I've seen various similar questions posted, but I can't quite seem to get all the pieces together.
I have a really simple form with an option single input field. I'd like to allow the user to input a value to use, but if they don't I want it to use a default, but only on submit.
Here's the HTML and JS I'm working with. This simply grabs the input value and adds it to the button URL. What I need it to do is see if it's blank on submit only and replace it with "NoName"
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function(e) {
var inputvalue = $("#rep").val();
window.open("https://example.com/"+inputvalue, "_blank");
});
});
</script>
<form id="options">
<p><input type="text" id="rep" name="rep" placeholder="Your Rep ID: " style="width:auto;" value="" /></p>
<p><button type="button" id="button" style="color:white; background-color: blueviolet; border:none; border-radius: 3px;">GO!</button></p>
</form>
The examples and solutions I've seen have it using placeholders, or onBlur events that cause the box to keep changing if they click in or out of it. I'd like this to stay blank, unless they enter something, then the button URL would change based on that alone.
If empty > use default value in the URL and if not empty > use the url+value entered.
The current behavior works fine if something is entered, but if not, it simply goes to the URL (as the current script tells it to)
If I understand you well is as simple as you described: if empty > use default value in the URL and if not empty > use the url+value entered.
just use simple if else, I made small jsfiddle for you.
get the user value
var userValue=$('#rep').val();
then check if user value is null or empty
if(userValue){ }
if it is empty then use default value
$(function(){
$('#button').click(function(){
var myDefault="http://url.com";
var userValue=$('#rep').val();
if(userValue){ location.href=userValue; }
else { //use default
location.href=myDefault; }
});
});
Is it possible to get the selected text in an input box of a website, using either jQuery or vanilla JavaScript?
I have tried with var selectedText = window.getSelection().toString();,
but this code only gets the text in a paragraph and not in an input box.
EDIT: Maybe I was unclear, I want to get the text from a website that I didn't create. I'm building a Chrome extension and I need to get the text from an input box of a website.
Here is a solution:
function showSelectedText() {
var input = document.getElementById('text');
var selection = text.value.substring(input.selectionStart, input.selectionEnd);
alert(selection);
}
<input id="text" value="Hello, how are you?"><br>
<button onclick="showSelectedText()">Show selected text</button>
If you don't mind using jQuery plugins you can accomplish that by using this one http://madapaja.github.io/jquery.selection/
It's flexible (You can use it both for inputs and for paragraphs)
Using jQuery, I change the value of an input text field through some process. After the process is done, I need to capture this change and apply it to another process. My problem is that I can't seem to capture this change and assign it to a variable. I know the changes are happening because the DOM is getting updated. Furthermore, this variable assignment works in IE, but not for the other browsers I tested.
Below is a snippet to prove my point (and you can see this online here: http://jsfiddle.net/xMwAE/).
<form>
<input type="hidden" name="my_hidden" value="Hidden Field" />
<input type="text" name="my_text" value="Text Field" />
</form>
$().ready(function() {
$('input[name=my_hidden]').val('Hello Hidden Field');
$('input[name=my_text]').val('Hello Text Field');
// Display
var temp = $('form').html();
// Though the DOM is updated with the new values. The variable temp
// does not capture the changes to the input text field, but captures
// the change in the hidden field. When in IE, temp captures the
// changes in both fields.
alert(temp);
});
Obviously, I need consistent behavior across browsers. Any ideas what's going on?
I don't get any trusted idea what happens, but somehow there should be a difference between setting the value as a member (input.value) or setting the value as a attribute-node.
This works for me :
$('input[name=my_text]').each(function()
{ this.setAttribute('value','Hello Text Field');});
I guess its a bug in innerHTML, see bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=535992
Alternatively, you can store the values of your fields into array and use however you like like this:
var data = [];
$('form :input').each(function(){
data.push(this.value);
});
Now you can check for values like this:
alert(data[0]);
alert(data[1]);