This question already has answers here:
Stop cursor from jumping to end of input field in javascript replace
(3 answers)
Closed 5 years ago.
I am trying to replace special characters i.e <,>,& from input field on blur and keypress. And the code is working fine but the problem is, once user enter the desired string and then try to edit that string it will move the cursor to the end of the string, So the user isn't able to edit the string in between. How do I make this script more user friendly so that user can edit the existing string from anywhere.
HTML
<input type="text" class="prevent-special" name="name" value="HelloWorld" >
Script
$('.prevent-special').on('keypress blur',function(e){
//console.log(e.keyCode);
$(this).val($(this).val().replace(/\<|\>|\&+/g,''));
})
JS Example
Try this:
$('.prevent-special').on('keyup blur',function(e){
var start = this.selectionStart,
end = this.selectionEnd
$(this).val($(this).val().replace(/\<|\>|\&+/g,''))
this.setSelectionRange(start, end)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" class="prevent-special" name="name" value="HelloWorld" >
Related
This question already has answers here:
Clicking a button within a form causes page refresh
(11 answers)
How do I get the value of text input field using JavaScript?
(16 answers)
Closed 2 years ago.
I'm trying to write an if statement code to redirect users below 18 to a separate website from users above and equal to 18 but the code isn't running, can someone figure out and explain what the problem is?
<body>
<div>
<form>
How old are you?
<br>
<br>
<input type="text" id="number">
<button onclick = submit();>Submit</button>
</form>
</div>
<script>
function submit() {
var number= document.getElementById("number");
if (number >= 18 ) {
location.href = "inec.com.ng"
;}
else if (number== isNaN){
alert('Input a number');
}
else {location.href = "www.google.com";}
}
</script>
You're trying yo use the DOM element itself instead of using its value
.
Once you get its value, don't forget to cast is to an int with parseInt:
var number = parseInt(document.getElementById("number").value);
This question already has answers here:
How to access the webpage DOM/HTML from an extension popup or background script?
(2 answers)
Closed 2 years ago.
I am teaching myself how to build Chrome Extensions. The first thing I want to build is a simple word predictor that takes in your last few words, predicts the next word, and allows you to autocomplete the word by pressing tab.
The first thing I need to do is figure out how to access the text box the user is currently typing in. For example, Grammarly seems to do this well. I've searched through StackOverflow, but can't seem to find an answer (forgive me, I'm a beginner). Any help would be amazing!
First you need to get permission for your extension to access a user's tabs, as I understand it.
Then you need to access the current tab with chrome.tabs.getCurrent()
Then I think you'll need to do something like let focusedElement = chrome.tabs.getCurrent(() => document.activeElement)
I've developed an extension, but I've never accessed tabs so I'm not entirely sure about the last part. If that doesn't work, let me know!
I think I see what you mean by access now..
Just add this function to your content script and it will attach a event listener too all inputs on the page that returns the current input field.
All it does is uses a for loop to loop through all inputs on the page, then add a click addEventListener to each input, and have it return the current input
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<input type="text" name="text" id="input1" placeholder="Click me">
<input type="text" name="text" id="input2" placeholder="Click me">
<input type="text" name="text" id="input3" placeholder="Click me">
<br><br><br>
<div id="display"></div>
</body>
<script>
function inputs(){
for(let i = 0; i < document.querySelectorAll('input').length; i++){
document.querySelectorAll('input')[i].addEventListener('click', ()=>{
//Get the DOM element of whatever input user clicks on
var currentInput = document.querySelectorAll('input')[i];
console.log(currentInput);
//Just for example purposes
document.getElementById('display').innerText = 'You clicked on input...' + (i+1);
});
}
}
inputs();
</script>
</html>
Now that you have the exact input field the user is typing in.. you should be able to add the predicted words, by setting the input field equal to the current value of it + your predicted text.
This question already has answers here:
How to prevent XSS with HTML/PHP?
(9 answers)
Closed 3 years ago.
Probably this is a known problem and there is a specific best practice.
I have to fill a text field value with received text from backend.
I this text contains some 'special characters' (for example " <) I have some issued during the rendering of the page.
How can I solve this?
Can I solve this issue front-end side?
I can use only javascript front-end side. I not use PHP;
I use this html code:
<input class="myclass" value="<%= text_from-backend %>" placeholder="My Placeholder"/>
You can replace special characters in PHP:
<input class="myclass" value="preg_replace('/[^ a-z\d]/ui','','<%= text_from-backend %>');" placeholder="My Placeholder"/>
This question already has answers here:
getAttribute() versus Element object properties?
(7 answers)
Closed 5 years ago.
I have a simple web-application with an input text field in it looking like this:
<input id="txtip" type="text" value="10.1.1.50" />
The address 10.1.1.50 is a default value for an ip address. And from javascript I would read it like this:
txtip.getAttribute("value")
Now let's suppose to change it to 10.1.1.49. In google chrome the above javascript code will still return 10.1.1.50, while the expression
txtip.value
returns 10.1.1.49.
What is the difference? What is the "right way"?
var el = document.getElementById('testBox');
$(document).focusout(function () {
alert('el.value = ' + el.value);
alert('el.getAttribute("value") = ' + el.getAttribute('value'));
e.preventDefault();
});
<h2>Change value in the text box</h2>
<input id="testBox" type="text" value="original value" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Found this on web might help you try following code type something and focusout
The difference is that element.value is real time and if a user changes let's say, a textbox input, it will reflect that, and show you the new value.
While getAttribute('value') will still show the original value="whateverWasHere" value.
<input type="text" name="item" size=30 onKeyUp="this.value=this.value.toUpperCase()" value="<%=item%>">
on keying in item value : 1016M012G+10/1K16:1-C but it displays me only 1016M012G 10/1K16:1-C without a plus sign after G
1016M012G/10/1K16:1-C works fine
1016M012G-10/1K16:1-C works fine
what is the problem??
When submitting the value of the input field, you have to encode the string to keep the "+" in there, beacause when submitting inside a URL the plus ("+") will be treated as a space, which is exactly what you end up with.
The solution to your problem should be found here: How to URL encode a URL in JSP?