onkeyup not working on hide() - javascript

I'm trying to show and hide div contents depends on the input of the user.
Here are my codes:
<input type="text" name="pass" id="pass" onkeyup="check_input(this.value)">
<div id="repeated_pattern" style="display:none">
<b>REPEATED PATTERN</b>
<p>Repeated characters</p>
</div>
<script>
function check_input(value){
//this would check if there are 3 or more characters repeated consecutively
var repeat_pattern = /(.)\1\1/.test(value);
if(repeat_pattern) {
$("#repeated_pattern").show(500);
}else{
$("#repeated_pattern").hide(500);
}
}
</script>
Tests:
When I try to input gg, the div contents did not show so the result is ok
When I try to input ggg, the div contents show so the result is ok
But when I try to remove the one g so it is now gg. It supposed to be the div contents must be hide but still it showing. onkeyup is not working properly with the hide() function.
How to onkeyup work with hide() or vice versa?

I'm getting this error:
ReferenceError: check_input is not defined
Try setting up the event handlers in Javascript so they are in scope:
http://jsfiddle.net/vHREF/1/
Javascript:
// Event handlers
if(document.addEventListener)
document.getElementById('pass').addEventListener('keyup',check_input,false);
// Good old Internet Explorer event handling code
if(document.attachEvent)
document.getElementById('pass').attachEvent('keyup',check_input);
function check_input() {
var value = $(this).val();
//this would check if there are 3 or more characters repeated consecutively
var repeat_pattern = /(.)\1\1/.test(value);
if (repeat_pattern) {
$("#repeated_pattern").show(500);
} else {
$("#repeated_pattern").hide(500);
}
}
HTML:
I'm trying to show and hide div contents depends on the input of the user. Here are my codes:
<input type="text" name="pass" id="pass">
<div id="repeated_pattern" style="display:none"> <b>REPEATED PATTERN</b>
<p>Repeated characters</p>
</div>

Related

How to addEventListener that takes effect on the state after a paste (instead of right before it)?

Example:
<!DOCTYPE html>
<html>
<body>
<input type="text" id="myText" value="some text">
<button id='coolButton' onclick="coolFunction()">Click me</button>
<br><br>
<span>Entered:</span>
<span id="enteredBox"></span>
<script>
//display whatever is in the textbox in a text span below it
function coolFunction() {
word = document.getElementById("myText").value;
document.getElementById("enteredBox").innerHTML = word;
}
//trigger coolFunction() whenever something is pasted into the text box
document.getElementById('myText').addEventListener('paste', () => {
document.getElementById("coolButton").click();
});
</script>
</body>
</html>
When I click the "Click me" button, whatever is currently in the textbox is properly displayed below it.
I want this same behavior to happen automatically when the user pastes into the box. So I add an event listener to the text box listening for a paste.
However, the code inside this paste listener works on what was in the text box before the paste. i.e. if there is "a" in the text box, and the user pastes a "b" into the box, only "a" (and not "ab") will be displayed below.
How do I make the event listener's code take effect after the paste is complete?
I've tried things like forcing it to wait a couple seconds, or displaying in a separate element, but the paste function code always reads what was in the box before the paste instead of after.
How do I make the event listener's code take effect after the paste is complete?
You can use .getData():
The DataTransfer.getData() method retrieves drag data (as a DOMString)
for the specified type. If the drag operation does not include data,
this method returns an empty string.
In order to get the clipboard data you need to use the event parameter to your paste event handler as per documentation.
The snippet:
function coolFunction() {
word = document.getElementById("myText").value;
document.getElementById("enteredBox").innerHTML = word;
}
document.getElementById('myText').addEventListener('paste', function(e) {
// get the data from the clipboard.....
var txt = e.clipboardData.getData('text');
// use the data
document.getElementById("enteredBox").innerHTML = txt;
});
<input type="text" id="myText" value="some text">
<button id='coolButton' onclick="coolFunction()">Click me</button>
<br><br>
<span>Entered:</span>
<span id="enteredBox"></span>
Or, if you need to get the data after the paste action compteted, you can delay the click event with a .setTimeout(). In this case your code:
document.getElementById("coolButton").click();
becomes:
setTimeout(() => document.getElementById("coolButton").click(), 10)
The snippet:
//display whatever is in the textbox in a text span below it
function coolFunction() {
word = document.getElementById("myText").value;
document.getElementById("enteredBox").innerHTML = word;
}
//trigger coolFunction() whenever something is pasted into the text box
document.getElementById('myText').addEventListener('paste', (e) =>
setTimeout(() => document.getElementById("coolButton").click(), 10)
);
<input type="text" id="myText" value="some text">
<button id='coolButton' onclick="coolFunction()">Click me</button>
<br><br>
<span>Entered:</span>
<span id="enteredBox"></span>
A last solution can avoid at all the button and it can be based on input event.
The snippet:
document.getElementById('myText').addEventListener('input', function(e) {
word = document.getElementById("myText").value;
document.getElementById("enteredBox").innerHTML = word;
});
<input type="text" id="myText" value="some text">
<br><br>
<span>Entered:</span>
<span id="enteredBox"/>

I try to pass the content of a paragraph element into a field of a contact form using Javascript

So the problem is this:
I try to get the text that is inside a specific paragraph with a specific id name and pass it inside a contact form .
i tried this
var src = document.getElementById("ptext"),
dest = document.getElementById("inform");
src.addEventListener('input', function() {
dest.value = src.value;
}};
Where "ptext" is the id of the element with the text of the paragraph and the "inform" is the id of the field in contact form.
The above code will trigger when the user clicks a button.
I am new in Javascript so the code above is probably wrong or faulty.
UPDATE: The HTML Code is this :
<p id="pext">Hello this is the text that is to be imported inside the form field</p>
form field:
<input type="text" name="your-subject" value="" size="40" id="inform" aria-required="true" aria-invalid="false" placeholder="Subjext">
I'm not sure if this is what you were trying to do, but if you're trying to get the text of a paragraph into a form field on a button click (useful a lot of the time with hidden form fields), then here is a code snippet to help you:
var src = document.getElementById("ptext");
var dest = document.getElementById("inform");
var getText = function () {
dest.value = src.innerText;
event.preventDefault();
return false;
}
<p id="ptext">This is some fake text that we'll put into the form.</p>
<form onsubmit="getText()">
<label for="text">Info from paragraph:</label><br>
<input type="text" id="inform" name="text"><br><br>
<input type="submit" >
</form>
Hello and welcome to Stack Overflow :)
To get the text that is inside specific paragraph, use
var src = document.getElementById("ptext").innerText;
To assign the value to an input field (which is what I'm assuming you are trying to do), use
document.getElementById("inform").value = src;
If you supply us with HTML element we could be even more precise.

delete function on multiple inputs

I have a js funciont that erase the last digit on an input, it work fine, but the problem is that i have another input and doesn't work. It just erase te digit on the first input.
<script>
function deleteTag(){
var strng=document.getElementById('entrada_1').value;
document.getElementById('entrada_1').value=strng.substring(0,strng.length-1);
}
</script>
<form method="POST" action="dashboard.php">
<label>RUT</label>
<input id="entrada_1" placeholder="12345678-9" type="text" name="rut">
<label>pass</label>
<input id="entrada_2" placeholder="pass" type="password" name="pass">
</form>
it works fine when is used on the input "entrata_1" but on "entrada_2" doesn't work, how can i make it work where the focus is?
You should instead just use a button without wrapping it in an anchor tag, give an onclick attribute like such onclick="deleteTag();". Give both the input fields a class name like class='entrada'.
Then in the function:
function deleteTag(){
var allInputs = document.querySelectorAll('.entrada');
allInputs.forEach((input) => input.value = input.value.substring(0, input.value.length - 1));
}

How to set text box to appear blank after .click function

So I have a simple log in that requires a user to input values from a json file into two different text boxes ,when the user name and (in this case I have used ID as password) matches then an alert appears to say... "welcome"
After the .click function is carried out the users text still remains in the text box, how can I get both text boxes to appear blank after the .click function?
$(document).ready(function() {
//Hide alert when page loads
$("#loginalert").hide();
$("#invalid").hide();
$("#loginbtn").click(function(event){
$.getJSON('result.json', function(jd) {
var id = $('#userName').val();
var name = $('#userName2').val();
var valid = false;
for (var i=0; i<jd.user.length; i++) {
if ((jd.user[i].ID == id) && (jd.user[i].name == name)) {
valid=true;
$('#loginalert').html('<img src="' + jd.user[i].imgpath + '"><br><p> Welcome: ' + jd.user[i].name + '</p><button type="button" id="btnhide" class="btn btn-primary btn-md">Hide</button>');
//show the alert after loading the information
$("#loginalert").stop().fadeIn('slow').animate({ opacity: 1.0 }, 3000)
$('#invalid').hide();
$('#btnhide').on('click', function(e){
//console.log('here');
e.preventDefault();
$('#loginalert').hide();
});
}
}
if (!valid) {
$('#invalid').fadeIn('slow');
$('#loginalert').hide();
}
});
}); });
username 1 and #username 2 are the text boxes - is there any way to get user name 2 to display in stars ****** when the user enters the password - this question is not that necessary but if i could also get that working that would be good.
thanks guys hope someone can help :)
is there any way to get user name 2 to display in stars ****** when
the user enters the password
You can use an input box with text property set as password. But that password masking character will be . instead of *. Not exactly sure, whether it will be a different character in some browsers.
<input type="password" id="txtPassword" />
text box to appear blank after .click function
You can set the .val() property of the jQuery objects of two those two textboxes.
$('#userName, #username2').val('');
Use <input type="password"> to show typing as stars.
Clear inputs by setting their value to be empty: $('#userName').val('');
And perhaps consider breaking your code down into a couple smaller functions so it's easier to follow.
document.getElementById("#myTextbox").value="";
This should get your textbox and set the value of it to "", which is blank.
Edit: JSFiddle
Another Method:
You can also add the script directly inside the button without using/creating a function.
<input id="inputId" type="name" />
<button onclick="document.querySelector('#inputId').value='';"> Clear </button>
Using querySelector:
<input id="inputId" type="name" />
<button onclick="click()"> Clear </button>
<script>
function click() {
document.querySelector('#inputId').value="";
}
</script>

Unexpected localeCompare Behavior

I have a few lines of code that attempt to detect the last field that the user interacted (typed) with.
The following event handler functions correctly, but the first case of the if/else always runs regardless if the user input text into field #input1 or #input2. Is there an unexpected behavior of localeCompare in this example?
JS:
$("#input1, #input2").keyup(function () {
if (("input1").localeCompare($(this).attr("id"))) {
calculateA();
} else if (("input2").localeCompare($(this).attr("id"))) {
calculateD();
});
}
HTML:
<div id="input1">
<div class="input-prepend">
<span class="add-on"></span>
<input id="foo" class="span7" type="text">
</div>
<br>
<div class="input-prepend">
<span class="add-on"></span>
<input id="bar" class="span7" type="text">
</div>
</div>
EDIT: It turns out that the error was not entirely on account of the code posted above. The two comparisons in the .js snippet were actually the body of a setTimeout callback function; as such, I did not realize that the execution context (and subsequently, the value of 'this') would change!
It seems you want to use event.target instead of this:
var id = event.target.id;
if (id === 'foo') {
// ...
}
You test can't never return 0, because you don't have any input with id input1, and the div with this id won't be this when the keyup event is raised.
Supposing you give the id input1 and input2 to your inputs, your code is still too complex. You don't need localeCompare to test string equality. And I suspect you didn't get that the result pass as true in a if test when the strings are different. You seem to want
$("#input1, #input2").keyup(function() {
if ("input1"===this.id) {
calculateA();
} else if ("input2"===this.id) {
calculateD();
}
});

Categories