What I'm trying to achieve is that when I'm entering an input value, the specific number of a textarea's value would replaced too according to the input value.
F.e: If I would enter into the input value a number 4, textarea's specific value (in this case a number) would be 4 too. If I would delete a value from the input, the value would be deleted from textarea too.
As you can see in the snippet, it works bad. It changes a value just one time. After that, 'text-areas' value isn't changing.
Could someone help me with that? Thank you for your time
$('.text1').keyup(function() {
var recommendationText = $('.textarea');
var specificString = '4';
var str = $('.textarea').val().replace(specificString, $(this).val());
recommendationText.val(str);
specificString = $(this).val();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="text1">
<textarea rows="4" class="textarea" cols="50">
This is a textarea of 4 rows.
</textarea>
There are a couple of issues with your code. The first is that the specificString value is being reassigned each time you do a keyup, so you need to set the default outside of the event handler. But also, if you delete the value, it will have no way of finding it and will prepend it to the start.
I'd personally recommend using a template based approach, rather than storing the previous value:
var specificString = '[numRows]';
var recommendationText = $('.textarea').val();
$('.text1').keyup(function() {
var numRows = $(this).val();
if (isNaN(parseFloat(numRows)) || !isFinite(numRows) || numRows.length < 1) {
numRows = 0;
}
var str = recommendationText.replace(specificString, numRows);
$('.textarea').val(str);
}).keyup();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="text1" value="4">
<textarea rows="4" class="textarea" cols="50">
This is a textarea of [numRows] rows.
</textarea>
This could use a proper templating language like Handlebars or Underscore.js templates, but that is too opinion-based to include in my answer.
Declare and initialize specificString outside of keyup() event.Otherwise your value for specificString will be always 4.
var specificString = '4';
$('.text1').keyup(function() {
var recommendationText = $('.textarea');
var str = $('.textarea').val().replace(specificString, $(this).val());
recommendationText.val(str);
specificString = $(this).val();
});
Well your issue is you replace the string so next time you look for the 4 it is not there. Reason why is you redefine specificString inside of the loop so it is always 4 and not what the user last typed. So if you move it outside it will work ("sort of")
Your design will fail if the user enters in something that matches another word. EG This, it will replace the first occurrence, not the string you want to replace. Or if you delete the string, you will not have any match.
So what can you do? I would use a data attribute with the original and use that. And I would make some sort of "template" so you know what you are replacing and do not replace another part of the string with the replacement when user matches text.
$('.text1').keyup(function() {
var ta = $('.textarea')
var specificString = /\{4\}/;
var entry = $(this).val() || "4";
var str = ta.data("text").replace(specificString, entry);
ta.val(str);
}).trigger("keyup");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="text1">
<textarea rows="4" class="textarea" cols="50" data-text="This is a textarea of {4} rows.">
</textarea>
In your way your code would work. Just change your code like this..! There are some logical issues in your code. Initiate the value of specificString outside the keyup() method to get first 4 and then then the value of textbox.
var recommendationText = $('.textarea');
var specificString = recommendationText.val().match(/\d+/);
$('.text1').keyup(function() {
if($(this).val() != '' && $.isNumeric($(this).val())) {
var str = $('.textarea').val().replace(specificString, $(this).val());
recommendationText.val(str);
specificString = $(this).val();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="text1">
<textarea rows="4" class="textarea" cols="50">
This is a textarea of 4 rows.
</textarea>
Solution is much easier than you might expect.
Note: The $ in ${inputVal} is not jquery, its part of template literals. Don't get confused there.
document.getElementById('text1').onkeyup = changeTextArea;
function changeTextArea() {
let inputVal = document.getElementById('text1').value;
let text = `This is a textArea of ${inputVal} rows`;
document.getElementById("textarea").value = text;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="text1">
<textarea rows="4" id="textarea" cols="50">
This is a textarea of 4 rows.
</textarea>
Related
I have this simple function to find and replace text in my textarea message. User will be able to type into the textarea and also be able to find and replace words from the text area they just entered. Currently I'm trying to use a while loop to replace multiple same words found in the textarea that the user keyed in. But every time I run it it seems to freeze the entire html page any idea why this is happening?
find and replace are textbox for user to key in the word they want to find and replace the user is able to key in multiple words to replace as well.
function findText() {
let find = document.getElementById('find').value;
let replace = document.getElementById('replace').value;
let message = document.getElementById('message').value;
var lmao = message.indexOf(find);
while (message.indexOf(find) != -1) {
document.getElementById("message").value = message.replace(find, replace);
}
}
Replace while loop with a replaceAll.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll
function findText() {
let find = document.getElementById('find').value;
let replace = document.getElementById('replace').value;
let message = document.getElementById('message').value;
var lmao = message.indexOf(find);
document.getElementById("message").value = message.replaceAll(find, replace);
}
<div>Find <input id="find" value="find" /></div>
<div>Replace <input id="replace" value="replace" /></div>
<div>
<textarea id="message" style="height: 100px">you can find and replace every words just by .replaceAll, example: find 1 find 2 find 3</textarea>
</div>
<div>
<button onclick="findText()">Submit</button>
</div>
Just a addition in other answer you can use g for global search and to replace where you find that word .
Read more about regex and //g here
Also you can let the search case-insensitivity using i along with g like this :
message.replace(/find/g, replace)
This way it will also replace Find finD FIND
And instead of using while you can use if loop
function findText() {
let find = document.getElementById('find').value;
let replace = document.getElementById('replace').value;
let message = document.getElementById('message').value;
var lmao = message.indexOf(find);
if(message.indexOf(find) != -1) {
document.getElementById("message").value = message.replace(/find/g, replace);
}
}
<div>Find <input id="find" value="find" /></div>
<div>Replace <input id="replace" value="replace" /></div>
<div>
<textarea id="message" style="height: 100px">you can find and replace every words just by .replaceAll, example: find 1 find 2 find 3</textarea>
</div>
<div>
<button onclick="findText()">Submit</button>
</div>
The issue is with your while condition. When all input fields are empty your while condition is true. So inside the while condition the input value keeps on updating to empty string again, which makes loop an infinite loop. Thats why your ui is breaking.
Issue Scenario
console.log(("").indexOf("") !== -1);
To fix this, you have to make sure that your find and replace values are not same. Or else, it will be an infinite loop again.
Fixed Solution
function findText() {
let find = document.getElementById('find').value;
let replace = document.getElementById('replace').value;
let message = document.getElementById('message');
while (find !== replace && message.value.indexOf(find) != -1) {
message.value = message.value.replace(find, replace);
}
}
<input type="text" id="find">
<input type="text" id="replace">
<textarea name="" id="message" cols="30" rows="10"></textarea>
<button onclick="findText()">Check</button>
I need a textbox, where everytime the text changes, I know what exactly has changed. I'm currently using a JQuery's listener for changes in my input element, and what I do is:
When the text changes
Get the text from the box a1 and compare to what I have in box a2.
If there are changes, log them into output textarea
Here is a Sample https://codepen.io/nikolaevra/pen/eeWWbo
I'm currently using the following diff library https://github.com/kpdecker/jsdiff, and it has O(NM) efficiency, which is a lot.
Is there a way to get the exact change that was made to the textarea using JQuery or anything like that? For example, if I had test in both a1 and a2 and then changed a1 to be testing, I want to see ing as the change that was made.
EDIT:
I tried playing around with the method a little bit and this is one problem that I found. When I run diff = "testing".replace("test",''); => ing just as required, but when I try diff = "testing a potato cannon".replace("testing potato cannon",''); => testing a potato cannon, where I only changed one character. This is a lot of overhead that I wanted to avoid. In that case, I would only want to know where the value has been changed and what it has been changed to. Not the entire tail of the string.
Consider that what you have in string a1 is the constant text and that what you have in string a2 is where you make changes.
let's just say that the value in a1 is "test";
Try this for your JavaScript:
var constValue = $('#a1').val();
$('#a2').change(function() {
var changingValue = $('a2').val(); // say the value entered is "testing"
console.log(changingValue.replace(constValue, ''); // gives you "ing"
}
This will give you the changed/entered (newly) value in string a2 and log it to your console.
The logic you use here is simple:
Read the value from string a2 and use the value in a1 to replace (if exists) in string a2, hence giving you the changed value. You need not use any libraries for this. JavaScript gives you this function called replace.
Do let me know if any more queries.
nikolaevra, have you tried using javascript's replace method? e.g diff = [value of a1].replace([value of a2],'');
You can use this method to achive what you are looking for :
function getDifference(a, b)
{
var i = 0;
var j = 0;
var result = "";
while (j < b.length)
{
if (a[i] != b[j] || i == a.length)
result += b[j];
else
i++;
j++;
}
return result;
}
Then you need to make a method to get the values from your textboxs and use it in your button onclick event, I used javascript, you can use jquery if you want :
function findDiff(){
var b1= document.getElementById("b1").value;//sky is blue
var b2= document.getElementById("b2").value;//sky is red
document.getElementById("result").value=getDifference(b1,b2);//red
}
https://jsfiddle.net/eu2kvfxo/
i hope this code will help you
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
var arr_text1 = new Array();
var arr_text2 = new Array();
var i=0;
var text2nw="";
$('#a2').on('input',function () {
arr_text1 = $("#a1").val().split('');
arr_text2 = $("#a2").val().split('');
if (arr_text1[i] == arr_text2[i]) {
}
else {
$('#output').val($("#a2").val().replace($("#a1").val(), ""));
// $('#output').val(text2nw);
}
if ($("#a2").val() != '') {
i++;
}
else {
i = 0;
$('#output').val('');
}
});
});
</script>
</head>
<body>
<p>This is the original text:</p>
<textarea id="a1" rows="4" cols="50" type="text"></textarea>
<p>Change Text to something else here:</p>
<textarea id="a2" rows="4" cols="50" type="text"></textarea>
<p id="title">This are the changes that you made:</p>
<textarea rows="10" cols="100" id="output" for="title"></textarea>
</body>
</html>
I have two textareas. I am copying data from one to another but if I change data in the first textarea then data in the second textarea is also changed which is obvious.
My requirement is like this: Suppose I have written "country" and it has been pasted to the second textarea. Now if I replace "country" with "anyother" then in the second textarea "country" should not be replaced. If I write something in the first textarea which is new(not replacement) then only that data will be pasted.
Is it possible to do?
My code till now:
function showRelated(e) {
//$('src2').html($('src1').html());
$('#src2').val( $('#src1').val() );
}
<textarea name="source" id="src1" cols="150" rows="20" onkeyup="showRelated(event)"></textarea>
<textarea name="source2" id="src2" cols="150" rows="20"></textarea>
the second text area is hidden from user.whatever the user writes will be copied to second textarea and will be transliterate.The requirement is like this if the user replace some data then also it should not effect the data which he already entered.that is why i need to maintain a copy without using database.
ok it seems this is what you want:
HTML:
<textarea id="src1"></textarea>
<textarea id="src2"></textarea>
JS:
$("#src1").keyup(function() {
var src1_val = $(this).val();
var src2_val = $("#src2").val();
var new_string = src2_val + src1_val;
$("#src2").val(new_string);
});
$('#one').on('blur', function() {
$('#two').val($('#two').val() + '\n' + $('#one').val());
});
You need to do some thing like this
$("#one").blur(function() { // triggering event
var one = $(this).val(); // place values in variable to make them easier to work with
var two = $("#two").val();
var three = one + two;
$("#two").val(three); // set the new value when the event occurs
});
This question isn't the easiest to decipher, but perhaps you want to store translated text into a second textarea?
<textarea id="one"></textarea>
<textarea id="two"></textarea>
var translate = function(input) {
// TODO: actual translation
return 'translated "' + input + '"';
}
var $one = $("#one");
var $two = $("#two");
$one.on('blur', function() {
$two.val(translate($one.val()));
});
how to convert text input to ASCII and display in text area..
HTML
<div class="form-group">
<label for="exampleInputPassword1">Favorite Food</label>
<input type="text" class="form-control" id="fFood" placeholder="Favorite Food" required>
<textarea name="txt_output"></textarea>
</div>
I assume what you want mean is to display the "text" typed in textBox in textArea
If so, and here you go: try here by clicking the button to display text in text area
The JS:
function display(){
var result = document.getElementById('fFood');
var txtArea = document.getElementById('textArea');
txtArea.value = result.value;
}
EDIT if you want to get the ASCII code from a string: try it here.
source of reference
If what you mean is how do you get the character code of a character from a javascript string, then you would use the string method str.charCodeAt(index).
var str = "abcd";
var code = str.charCodeAt(0);
This will technically be the unicode value of the character, but for regular ascii characters, that is the same value as the ascii value.
Working demo: http://jsfiddle.net/jfriend00/ZLRZ7/
If what you mean is how you get the text out of a textarea field, you can do that by first getting the DOM object that represents that object and then by getting the text from that object:
var textareas = document.getElementsByName("txt_output");
var txt = textareas[0].value;
If you then want to put that text into the input field, you can do that with this additional line of code:
document.getElementById("fFood").value = txt;
jquery
$(function(){
$('input[type=text]').keyup(function(){
var x = $('input[type=text]').val();
$('textarea').val(x);
});
});
javascript
<script>
function myFunction()
{
var x = document.getElementById("fFood").value;
document.getElementById("ta").value=x;
}
</script>
and html
<div class="form-group">
<label for="exampleInputPassword1">Favorite Food</label>
<input type="text" class="form-control" id="fFood" onkeyup="myFunction()" placeholder="Favorite Food">
<textarea name="txt_output" id="ta"></textarea>
</div>
I know this is an extremely basic question but I'm stuck on this.
I have two input boxes and I want to calculate those inputs and show the result into another input (3rd one) immediately without the need of a submit button.
I means, once I start entering the values into the input and the result will shows live in the 3rd input which is the represent the result...
<input type="text" class="input value1">
<input type="text" class="input value2">
<input type="text" disabled="disabled" id="result">
<script>
$(document).ready(function(){
var val1 = $(".value1").val();
var val2 = $(".value2").val();
$(".input").keyup(function(){
$("#result").text(val1+val2);
});
});
</script>
Put val1 and val2 in keyup statement.
$(document).ready(function(){
$(".input").keyup(function(){
var val1 = +$(".value1").val();
var val2 = +$(".value2").val();
$("#result").val(val1+val2);
});
});
Look at fiddle: http://jsfiddle.net/g7zz6/
Under the assumption of SUM as you stated, the inputs will be numberic in nature.
$(".input").on("change", function(){
var ret = Number($(".value1").val()) + Number($(".value2").val());
$("#result").val(ret);
}
just set the text value, also you need to parse them as other wise they will be concatenated as strings.
$(document).ready(function () {
var val = parseInt($(".value1").val()) + parseInt($(".value2").val());
$("#result").text(val);
});
Live Demo
function addinput(){
var x= Number(document.getElementById("first").value);
var y= Number(document.getElementById("second").value);
var z= Number(x+y);
document.getElementById("l").value = Number(z);
}