This question already has answers here:
Get first word of string
(12 answers)
Closed 1 year ago.
I want to get only the first value from copy-paste value.
For example:
my copy text is: Lorem Lipsum Test
So when I copied this above text and paste it into the HTML input filed there need to come only "Lorem" I don't need other text
Is there any way to achieve these things?
Thanks in advance.
it only returns always the first word from string input and you have to clear for copy new value then it's show first word of the new copied string.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#getfirstword").on("keyup", function(e) {
debugger
// do stuff!
var str = $(this).val();
//Now i separate them by "|"
var str1 = str.split('|');
//Now i want to get the first word of every split-ed sting parts:
var firstWord ="";
for (var i=0;i<str1.length;i++)
{
//What to do here to get the first word :)
firstWord = str1[i].split(' ')[0];
}
$("#input1").val(firstWord);
})
});
</script>
</head>
<body>
<input id="getfirstword" />
<input id="input1" disabled/>
</body>
</html>
You can add an input event to see what you are trying to add to your element. This code will split your pasted text and only add the first word.
const input = document.querySelector('input');
const log = document.getElementById('values');
input.addEventListener('input', updateValue);
var previousValue = "";
function updateValue(e) {
log.textContent = e.data;
if (e.data && e.inputType == "insertFromPaste") {
if (e.data.length > 1) {
let val = e.data.split(" ")[0];
let str = previousValue + val;
e.target.value = str;
}
}
previousValue = e.target.value;
}
<input placeholder="Enter some text" name="name"/>
<p id="values"></p>
Related
I'm practicing JavaScript creating a convert case where I have a textarea where the initial text is informed and the second where the converted result should be output, I created a function to invert the text but when I click on the button that calls this function it doesn't convert if there is already a typed text.
How do I get it to update the values when I click on the button?
function reverseText(){
function reverse(s){
var word = '';
for (var i = s.length - 1; i >= 0; i--)
word += s[i];
return word;
}
$('#input1').keyup(function(){
var text = $('#input1').val();
var newstring = reverse(text);
$('#input2').val(newstring);
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="convert-case">
<textarea id='input1'></textarea>
<textarea id='input2' readonly></textarea>
</div>
<div class="function-button">
<button onclick="reverseText()">reverse text</button>
</div>
I want to create other conversion functions so I want the value the user has already typed to be converted as soon as he clicks on one of the conversion options.
If I understand your question you want the button to directly convert the text. Right now you code is doing the reverse, but update the input only after user type a key.
You want to revert instantly on button click, and keep the update going
function reverseText(){
function reverse(s){
var word = '';
for (var i = s.length - 1; i >= 0; i--)
word += s[i];
return word;
}
function updateInput() {
var text = $('#input1').val();
var newstring = reverse(text);
$('#input2').val(newstring);
}
$('#input1').keyup(updateInput);
updateInput();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="convert-case">
<textarea id='input1'></textarea>
<textarea id='input2' readonly></textarea>
</div>
<div class="function-button">
<button onclick="reverseText()">reverse text</button>
</div>
I don't really get what you want. If you want to get the value from input1, reverse the text and put it into input2 then just remove the first and last line of the code below
$('#input1').keyup(function(){
var text = $('#input1').val();
var newstring = reverse(text);
$('#input2').val(newstring);
});
For the numeric input element, is there a way to check if there is only a minus input? I can do this in a bad way in the example below. I'm looking for a more precise, simple method that I can access via the element.
When input is only - => numberInput.value equals to empty string also innerText and innerHTML equals to empty string.
var lastKey;
var checkNegativeSign = function() {
let numberInput = document.querySelector("input");
if(lastKey === '-') {
document.getElementById("result").innerText = "is negative";
} else {
document.getElementById("result").innerText = "";
}
}
var onKeyUp = function(event) {
// Should check Escape, ctrl etc.
lastKey =event.key;
}
<html>
<body>
<input type="number" onkeyup="onKeyUp(event)" />
<button onclick="checkNegativeSign()">Check Negative Sign</button>
<div id="result"> </div>
</body>
</html>
You could do
let sign = Math.sign(Number(document.querySelector("input").value))
console.log(sign === 1? "positive": "negative")
This question already has answers here:
How do I make the first letter of a string uppercase in JavaScript?
(96 answers)
Closed 3 years ago.
How to make in input the first letter capitalized? Css method text-transform: capitalize; does not fit.
var positions = $('ul li');
var inputSearch = $('input');
inputSearch.val('').on('input', function(e){
var terms = this.value.toLowerCase().split(/[\s,.]+/);
positions.each(function(){
var text = this.innerText.toLowerCase();
this.hidden = !terms.every(function(term){
return text.indexOf(term) !== -1;
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input placeholder="placeholder">
<ul>
<li>wrew</li>
<li>w</li>
<li>rew</li>
</ul>
$('ul li').each(function(index, elem){
var text = $(elem).text();
text = text.charAt(0).toUpperCase() + text.slice(1);
$(elem).text(text);
});
You can use the code below. This code will track when you press the key, and when you do, it'll get the current value of the input (before the key you pressed is added). It would then check if the last character in the input field is a space. If it is, it'll add to text the key you just pressed, but uppercase. If not, it'll simply add the key you just pressed to text
Then, the next time you press any key, the value of the input would change the the value of text, which would have the first letter of every word capitalized.
var text = "";
var val;
$(".input").keypress(function(e) {
val = $(this).val();
if (val[val.length - 1] == ' ') {
text += e.key.toUpperCase();
}
else {
text += e.key;
}
});
$(".input").keydown(function() {
$(this).val(text);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input placeholder="Placeholder" class="input" />
Hi I am NewBee in Javascript. This is my second week.
Below is the code that has a form with three input fields.
The relationship of the fields is:
the second field is twice the value of the first field
the third field is the square of the first field
I have managed to do the above but i am not able to do the below :
If a user enters a value in the second or third field, the script should calculate the appropriate value in the other fields. Currently the code works well ONLY if I enter the value in the first field.
I hope I explained well in other words : how do I enter say 144 in the last textbox and the other 2 textboxes show 12 and 24 respectively. Or If I enter 24 first and first and the third text boxes show 12 and 144.
Thanks
Vipul
<html>
<head>
<script>
window.onload = init;
function init() {
var button = document.getElementById("usrButton");
button.onclick = save;
onkeyup = doMath;
function doMath(){
var base = document.getElementById("base").value;
var baseNumber_timesTwo = document.getElementById("baseNumber_timesTwo").value = (base*2);
var baseNumber_square = document.getElementById("baseNumber_square").value = (base*base) ;
}
}
</script>
</head>
<body>
<form>
<input type="text" name="base" id="base" onkeyup= "doMath()">
<br><br>
<input type="text" name="baseNumber_timesTwo" id="baseNumber_timesTwo" onkeyup= doMath()>
<br><br>
<input type="text" name="baseNumber_square" id="baseNumber_square" onkeyup= doMath()> <br><br>
</form>
</body>
</html>
take a look at the code below:
<html>
<head>
<script>
window.onload = init;
var init = function(){
var button = document.getElementById("usrButton");
button.onclick = save;
onkeyup = doMath;
}
var doMathbase = function(){
console.log('here');
var base = document.getElementById("base").value;
var baseNumber_timesTwo = document.getElementById("baseNumber_timesTwo").value = (base*2);
var baseNumber_square = document.getElementById("baseNumber_square").value = (base*base) ;
}
var doMathBase2Time = function(){
var baseNumber_timesTwo = document.getElementById("baseNumber_timesTwo").value;
var base = document.getElementById("base").value = (baseNumber_timesTwo/2);
var baseNumber_square = document.getElementById("baseNumber_square").value = (base*base) ;
}
</script>
</head>
<body>
<form>
<input type="text" name="base" id="base" onkeyup= "doMathbase()">
<br><br>
<input type="text" name="baseNumber_timesTwo" id="baseNumber_timesTwo" onkeyup= "doMathBase2Time()">
<br><br>
<input type="text" name="baseNumber_square" id="baseNumber_square" onkeyup= "doMathBaseSquare()">
<br><br>
</form>
</body>
You need to bind another function to the second and third field. I did it to the second. Now if you entered a number in the second field it return the 'base' number and the square of the base.
Try do it for the third :)
This should fit your needs:
Fiddle
//declaring those earlier saves you to get those by ID every
//time you call "doMath()" or something else
var base = document.getElementById("base");
var baseNumber_timesTwo = document.getElementById("baseNumber_timesTwo");
var baseNumber_square = document.getElementById("baseNumber_square");
function clearUp() {
base.value = "";
baseNumber_timesTwo.value = "";
baseNumber_square.value = "";
}
function doMath() {
//check which of the fields was filled
if(baseNumber_timesTwo.value){
base.value = baseNumber_timesTwo.value / 2;
}
if(baseNumber_square.value){
base.value = Math.sqrt(baseNumber_square.value);
}
//fill other fields according to that
baseNumber_timesTwo.value = (base.value*2);
baseNumber_square.value = (base.value*base.value) ;
}
As you see: There is no need to write more than one arithmetic function if you make sure that only one value is given at the time of evaluation (this is achieved by the cleanUp()
method)
However there are still some flaws in this solution! Since you are a js beginner I would suggest you to read the code and think about possible solutions for those problems as a little exercise :-)
- You cannot enter a 2 (or more) digit number in any field, why not? What do you have to change in order to allow such numbers as input?
- Why is it better (in this case!) to set the values to " " instead of '0' in the cleanUp function? Why does the code break when you try using '0' instead of "" ?
- Why does doMath() only check for values in the last two field (baseNumber_timesTwo and baseNumber_square) while ignoring the 'base' field?
Greetings, Tim
I have several textfields which will populate a text area.
I managed to populate it with a javascript function. On the onblur event of a textfield, the value of the textfield is passed and the textarea is field with this value.
However, my problem is the following:
If I modify a previously filled textfield, the textarea will simply append it again.
What I need is some functionality that if:
1: If I give focus to the textfield which is already been filled and I don't modify it, it will not be appended (I implemented this with an if statement and substring.
2: If I modify a previously filled textfield, the text area DOES NOT append it again at the end of the string BUT it replaces the part of the textarea with just that text field new value.
Take for instance the following 2 textfields:
<input type="text" id="txtName" name="txtName" />
<input type="text" id="txtSurname" name="txtSurname" />
If I fill up these textfields with John and Doe respectively, the textarea value will become:
txtName=John,txtSurname="Doe"
I managed to implement this.
What I need is that if I edit txtName from John to Alex, the textarea value will be as follows:
txtName=Alex,txtSurname=Doe
and not like is currently being displayed, i.e.
txtName=John,txtSurname=Doe,txtName=Alex
Should I achieve this by using an array which will store all the textfields values?
Any help would be greatly appreciated.
Many thanks in advance.
the following code should work for you. I have wrapped the textboxes inside a div. and also registered a onkeyup event on both the textboxes.
The javascript code iterates through each textboxe inside the div, and prints its name and value in the textarea.
HTML
<div id="textBoxContainer">
<input type="text" id="txtName" onkeyup="UpdateTextArea();" name="txtName" />
<input type="text" id="txtSurname" onkeyup="UpdateTextArea();" name="txtSurname" />
</div>
<textarea id="textAreaResult"></textarea>
Javascript
<script type="text/javascript">
function UpdateTextArea() {
var textBoxContainerDiv = document.getElementById("textBoxContainer");
var textboxes = textBoxContainerDiv.getElementsByTagName("input");
var finalResult = "";
var textAreaFinalResult = document.getElementById("textAreaResult");
for (var i = 0; i < textboxes.length; i++) {
finalResult = finalResult + textboxes[i].id + "=" + textboxes[i].value + ",";
}
textAreaFinalResult.value = finalResult;
}
</script>
Hope this Helps! :)
For the record, I feel like this code is an ugly hack, but it should do the trick...
var fieldName = "txtName"; //your field name
var newValue = "Alex"; //your new value
var value = document.getElementById("my-textarea").value;
value = "," + value; //add a comma so we can ensure we don't replace the wrong value where the fieldname is a substring of another fieldname
if(value.indexOf("," + fieldName + "=") > 0) //see if a value is already defined
{
var index = value.indexOf("," + fieldName + "=") + fieldName.length + 2;
var start = value.substring(0, index); //get the portion before the value
var end = value.substring(index); //get everything else
if(end.indexOf(",") > 0)
{
end = end.substring(end.indexOf(",")); //remove the value by reducing the end to the location of the next comma
}else{
end = ""; //if there isn't another comma it was the last value in the list, so set the new end to nothing
}
value = start + newValue + end;
value = value.substring(1); //remove the starting comma we gave it
document.getElementById("my-textarea").value = value;
}else{
//append it to the end as you are already doing
}