that make up a currency converter, one with the number to be converted, the other receiving the converted number.
My question is: in IE in the input field, an X appears that if clicked allows the deletion of the value. I need to know how I do it (maybe with Javascript) at the click of the X I have to delete the result received in the other input field (see image).
There's no specific event handler available for the clear(X) icon. As a workaround, you can use the mouseup event to catch the change when you clear the input by clicking the clear(X) icon.
Sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
input1: <input type="text" id="ipt1" value="111" /><br />
input2: <input type="text" id="ipt2" value="222" />
<script>
$("#ipt1").bind("mouseup", function (e) {
var $input = $(this),
oldValue = $input.val();
if (oldValue == "") return;
// When this event is fired after clicking on the clear button
// the value is not cleared yet. We have to wait for it.
setTimeout(function () {
var newValue = $input.val();
if (newValue == "") {
$("#ipt2").val("");
}
}, 1);
});
</script>
</body>
</html>
Result:
Related
I am trying to add some text to an input element using a button. I have so far tried modifying .textContent - which does actually appear to modify the textContent, but this does not show up in the image box. Adjusting the .value does not seem to work.
My code:
const buttons = document.querySelectorAll(".row button");
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function() {
document.querySelector("input").value += buttons[i].value;
})
}
Every solution I have read online just suggests modifying the .value of the input element, which is not working for me, so I am at a loss.
EDIT: Thanks everyone, such a silly thing to overlook.
Modifying the value property should work for you. Your problem lies in this statement:
value += buttons[i].value
Buttons don't have a value unless you specify one. The inner text of a button is accessed using the innerHTML or innerText properties, not the value property:
const button = document.querySelector("button");
const input = document.querySelector("input");
button.addEventListener("click", (e) => {
input.value += button.innerText;
});
<input type="text" />
<button type="button">bleh</button>
With buttons, the value property is used for PHP form submission, not storing textual data.
Are you trying to set the value for the input field based on the button's display text?
If so, you can attempt to replace buttons[i].value with buttons[i].textContent
You can use button.innerHTML to assign the input value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<input type="text" value="" />
<button>1</button>
<button>2</button>
<script>
const buttons = document.querySelectorAll("button");
const input = document.querySelector("input");
buttons.forEach((button) => {
button.addEventListener("click", function () {
input.value += button.innerHTML;
});
});
</script>
</body>
</html>
I'm trying to use str.replace in order to remove any non-numerical characters from a number imput field when someone uses copy-pastes something in it. However the function always seems to remove all characters instead of just removing the non-numerical ones.
Surprisingly the function is able to detect when my string is purely numerical and won't change it in those cases, but adding a single other character will cause the whole string to be ditched instead of just removing the wrong characters.
I tried to change the regexp of the function to /\D/, but it didn't amount much.
Here's a minimal reproducible example, which must be run on Firefox.
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body style="margin:0px;">
<script src="../lib/jquery-3.3.1.js"></script>
<input type="number" id="inp"></input>
<script>
let input = document.getElementById("inp");
input.onblur = function()
{
$(document).ready(function()
{
input.value = input.value.replace(/[^0-9]/g, "");
});
}
</script>
</body>
</html>
I expect an output such as "34a01 2" to be "34012", but the actual output is "" (nothing). Is there something wrong in my regexp ?
let input = document.getElementById("inp");
input.onblur = function() {
$(document).ready(function() {
input.value = input.value.replace(/[^0-9]/g, "");
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="inp"></input>
This looks to be a Firefox issue (or bug). Whenever a numeric input has non-numeric characters anywhere, the .value of the field will be the empty string:
setInterval(() => {
console.log(input.value);
}, 400);
<input id="input" type="number">
It's unfortunate, but you may have to simply remove the type="number" for the .value to be retrieved and replaced as desired:
let input = document.getElementById("inp");
input.onblur = function() {
input.value = input.value.replace(/[^0-9]/g, "");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="inp"></input>
Either that, or keep type="number" and tell the user that the value they attempted to paste is invalid, and prevent it (because you have no way of retrieving and replacing it).
(also: only call $(document).ready once, when you're adding the listeners, if at all - your current code is adding a new listener every time the field is blurred)
I've read your comments about Firefox and I've prepared a new version.
Not including the "number" type seems to work.
Using "number" type is not causing any issue in Chrome so I guess that Firefox is not behaving in the same way.
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body style="margin:0px;">
<script
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
crossorigin="anonymous"></script>
<input id="inp"></input>
<script>
let input = document.getElementById("inp");
input.onblur = function() {
input.value = input.value.replace(/[^0-9]+/g, "");
}
</script>
</body>
</html>
So to give a little bit of detail, I'm trying to make an interactive fiction game or text adventure. I have a form where all the "commands" for the game will be typed. I'm working on the first command which is the string "start" to call a prompt. Just to test the code, I have the prompt say "success!" when done correctly. What's happening though, is as soon as I open the web browser to test, the prompt triggers before I even type a command. Here's the code.
<html>
<head>
<script type="text/javascript" src="scripts/engine.js"></script>
</head>
<body>
<form id="testForm"> <input type="text" name="">
</form>
</body>
</html>
And then here's the javascript.
var input = document.getElementById("testForm");
if (input = "start") {
prompt("Success!");
}
Try this:
<html>
<head>
<script type="text/javascript" src="scripts/engine.js"></script>
</head>
<body>
<form id="testForm">
<input type="text" id="myInput">
</form>
<script>
var myForm = document.getElementById("testForm");// get the form element.
var myInput = document.getElementById("myInput");// get the input element
myForm.onsubmit = function() { // when the form is submitted, execute this function.
if (myInput.value == "start") { // if the value of the input equals 'start', show prompt.
prompt("Success!");
}
return false; //return false, so the form doesn't get submitted.
};
</script>
</body>
</html>
Edit:
Added submit event handler, that returns false, so the form does not get submitted.
You need to check the value of the input like so
var input = document.getElementById("inputID");
var value = input.value;
The code will always be ran straight away because it has no event handler. You could add a button which triggers it
document.getElementById('button').addEventListener('click', function () {
var input = document.getElementById("inputID");
if (input.value === 'start') {
// Do something
}
});
Or if you prefer on the forms submit event:
document.getElementById('testForm').addEventListener('submit', function () {
var input = document.getElementById("inputID");
if (input.value === 'start') {
// Do something
}
});
I am trying to show alert and focus on control when user try to leave control without entering any value in the control. This requirement is something like user is forced to enter values (I know there are certain limitations of such requirements).
When user leaves textbox1 alert is shown and at the sametime alert for textbox2 is also displayed as I am trying to focus on textbox1. This becomes infinite loop in IE and both the pop up keep on displaying in IE.
This code works perfectly in chrome but not in any version of ie.
Code sniphet below:
<html>
<head>
<script language="javascript">
function ShowAlertAndFocus1(){
var txt1 = document.getElementById("txtBox1");
if(txt1.value.length == 0){
alert("Blur 1 called");
txt1.focus();
};
};
function ShowAlertAndFocus2(){
var txt2 = document.getElementById("txtBox2");
if(txt2.value.length == 0){
alert("Blur 2 called");
txt2.focus();
};
};
</script>
</head>
<body>
<input type="text" id = "txtBox1" onblur="ShowAlertAndFocus1();"/>
<input type="text" id = "txtBox2" onblur="ShowAlertAndFocus2();"/>
</body>
</html>
I am not sure if am missing something or this limitation is with IE only?
<!DOCTYPE html>
<html>
<head>
<title> x </title>
<script>
function setOnBlur( txtBox,n ){
setTimeout( function(){
if (document.activeElement==txtBox) {
txtBox.onblur=function(){
if (txtBox.value.length == 0){
alert("Blur "+n+" called")
setTimeout( function(){txtBox.focus()},0 )
}
else txtBox.onblur=null
}
}
},0)
}
</script>
</head>
<body>
<input type=text id=txtBox1 onfocus=setOnBlur(txtBox1,1) >
<input type=text id=txtBox2 onfocus=setOnBlur(txtBox2,2) >
</body>
</html>
No Proper Solutions found till now.
EDIT -
Trick - I used two variables and set them inside the methods. I again checked the values before showing the popup.
Basically, your alerts cause the focus to go away as soon as you focus on the text fields. It is an odd behavior in IE that the blur event comes first. Maybe you can try replacing the alerts and try using console.log instead (That would only work in IE 8 & 9 if developer tools are opened). Or best, you can remove the alerts completely. That should work.
<html>
<head>
<script language="javascript">
function ShowAlertAndFocus1(){
var txt1 = document.getElementById("txtBox1");
if(txt1.value.length == 0){
console.log("Blur 1 called");
txt1.focus();
};
};
function ShowAlertAndFocus2(){
var txt2 = document.getElementById("txtBox2");
if(txt2.value.length == 0){
console.log("Blur 2 called");
txt2.focus();
};
};
</script>
</head>
<body>
<input type="text" id = "txtBox1" onblur="ShowAlertAndFocus1();"/>
<input type="text" id = "txtBox2" onblur="ShowAlertAndFocus2();"/>
</body>
</html>
I have a textarea, which will handle output, and a textfield which will handle user input.
Focus will be entirely on the input field.
I can't make it so that the user input field will add text when the form is submitted (enter key is pressed). It will only work if there is a button and this is clicked. How do I solve this issue?
Below is the code i'm trying for the enter key submit.
<html>
<head>
<script type="text/javascript">
function addtxt(input) {
var obj=document.getElementById(input)
var txt=document.createTextNode("blah blah")
obj.appendChild(txt)
}
</script>
</head>
<body>
<textarea id="textarea1"></textarea>
<br><input type="text" onSubmit="addtxt('textarea1');">
</body>
</html>
This will do the job. Also, you should deal with the value property of the textarea rather than appending text nodes to it: if the user changes the textarea's value at all, changing its child nodes afterwards will have no effect. If you want the textarea to be read-only, add a readonly attribute: <textarea id="textarea1" readonly></textarea>.
<script type="text/javascript">
function inputKeyDown(evt, input) {
if (evt.keyCode == 13) {
var textarea = document.getElementById("textarea1");
textarea.value += "\n" + input.value;
input.value = ""; // I'm guessing you may want this
return false;
}
}
</script>
<input type="text" onkeydown="return inputKeyDown(event, this);">
Instead of submit, try using the keypress event. Detect when the enter key is pressed, copy the data, and cancel the event (to prevent form submission). If you allow the form to submit, it will simply replace the existing page with the result of the form post.
Modifying your current code:
<html>
<head>
<script type="text/javascript">
function addtxt(e,ctl,input) {
var key;
if (window.event) {
key = event.keyCode;
} else {
key = e.which;
}
if (key == 13) {
var obj=document.getElementById(input);
var txt=document.createTextNode("blah blah");
obj.appendChild(txt);
ctl.value = '';
return false;
}
return true;
}
</script>
</head>
<body>
<textarea id="textarea1"></textarea>
<br><input type="text" onkeypress="return addtxt(event,this,'textarea1');">
</body>
</html>
Note that there may be much better ways to achieve your ultimate goal, but since you don't state what that is, this is really the best I can do. Also, I'd would definitely look at using a framework like jQuery/Dojo/Prototype and add the handlers unobtrusively.
Use the form element
<form onsubmit="addtxt('textarea1')">
<textarea id="textarea1"></textarea>
<br><input type="text" />
</form>
You can use JQuery
$('textarea#textarea1').keypress(function(e) {
if (e.keyCode == 13) { // enter
//do some stuff
}
});