I am working on adding "search" text to a search box. I am trying to achieve:
onfocus: disappear text
And
onblur: reappear text
So far I have achieved this but i have had to hardcode it into html:
eg.
<input type="text" name="s" id="search-text" size="15" value="Search"
onfocus="if (this.value==this.defaultValue)
this.value='';" onblur="if(this.value==''){this.value='Search'}">
And if I add this the of my .html file I am getting the same result:
eg.
<script type="text/javascript">
var defaultText = "Search...";
var searchBox = document.getElementById("search");
//default text after load
searchBox.value = defaultText;
//on focus behaviour
searchBox.onfocus = function() {
if (this.value == defaultText) {//clear text field
this.value = '';
}
}
//on blur behaviour
searchBox.onblur = function() {
if (this.value == "") {//restore default text
this.value = defaultText;
}
}
</script>
(courtesy: http://zenverse.net/javascript-search-box-show-default-text-on-load/)
What i am trying to achieve is using the above code in an external .js file but no matter what I do i cannot manage to back-link the code to my search box in my .html file.
I am sorry if this is a bad question I have made about 10 different .html and .js files swapping and remapping code and still can't get it to work without having the javascript in the actual .html file.
Any help would be much appreciated Thank You.
Use the HTML5 placeholder attribute:
<input type="text" placeholder="Search" />
Notice that the text doesn't go away until the user enters some text. This way, the user will see the hint for longer.
Try using the HTML placeholder attribute.
<input type="text" name="s" id="search-text" size="15" value="" placeholder="Search" />
But if you still want do it with JavaScript, see the following demo:
var defaultText = "Search...";
var searchBox = document.getElementById("search");
//default text after load
searchBox.value = defaultText;
//on focus behaviour
searchBox.onfocus = function() {
if (this.value == defaultText) {//clear text field
this.value = '';
}
}
//on blur behaviour
searchBox.onblur = function() {
if (this.value == "") {//restore default text
this.value = defaultText;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<form method="get" action="">
<input type="text" name="search" id="search" value="" />
<input type="submit" name="submit" value="Search" />
</form>
</body>
</html>
Might be useful to take a look at jQuery Placeholder for placeholder support in older browsers.
Use below script it is working fine.
<script type="text/javascript">
var defaultText = "Sitede ara…";
var searchBox = document.getElementById("ctl00_ctl34_S52EF3DAB_InputKeywords");
//default text after load
searchBox.value = defaultText;
//on focus behaviour
searchBox.onfocus = function () {
if (this.value == defaultText) {//clear text field
this.value = '';
}
}
Related
I need to validate the integrity of my email and I am doing it by pressing a "validate" button.
I wonder if there is a way to do the same without pressing a button? Say, just exiting the email field, clicking another field for example (field2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Get Text Input Field Value in JavaScript</title>
</head>
<body>
<p >Enter an email address:</p>
<input type="text" placeholder="Type your email here..." id="myInput">
<br>
<input type="text" placeholder="Field 2" id="field2">
<br>
<button type="button" onclick="getInputValue();">Validate</button>
<script>
function getInputValue(){
// Selecting the input element and get its value
var inputVal = document.getElementById("myInput").value;
const re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
// return re.test(inputVal);
resultat = re.test(inputVal);
// document.write(resultat);
if (resultat) {
alert(inputVal+" is valid");
} else {
alert(inputVal+" is NOT valid");
}
return false;
}
</script>
</body>
</html>
You could use the built in functionality of html via
<input type="email" required>
If you then applied css through the pseudo-class :invalid, you would see a visual hint.
input:invalid {
background-color: #ffdddd;
}
Check these ressources:
https://developer.mozilla.org/de/docs/Web/CSS/:invalid
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email
Look at onBlur event
const onBlur = () => {
const test = document.getElementById("test");
// here you have your value
test.value = test.value.toUpperCase();
}
<input type="text" id="test" onblur="onBlur()">
Hellma's answer is correct, HTML has this functionality and you'd be hard pressed to come up with an implementation better than the browsers. That said, if you need additional validation on top of what the browser provides you could use the blur event. Instead of the onclick attribute on your button, you could add an onblur attribute to your input to run the getInputValue function whenever the user's focus leaves that input element. This would look like
<input type="text" placeholder="Type your email here..." id="myInput" onBlur="getInputValue()">
You can use the keyUp event, try this:
function validate(e){
inputText = e.target.value;
console.log(inputText);
if(inputText == 'condition'){
console.log('condition passed!')
}
}
<input onkeyup="validate(event)">
I have three simple texts and I want to make a validation on "onblur" of the second text. It should delete the content just typed and keep focusing on the same input. I can make it delete the content, but it doesn't focus. What could be happening?
function validate() {
document.getElementById("txt-second").value = "";
document.getElementById("txt-second").focus();
}
<input type="text" id="txt-first" />
<input type="text" id="txt-second" onblur="validate();" />
<input type="text" id="txt-third" />
Strange that onblur doesn't work for me either.
<input type="text" id="txt-first"/>
<input type="text" id="txt-second"/>
<input type="text" id="txt-third"/>
<script>
function validate(event){
this.value = "";
this.focus();
}
var txtSeconds = document.getElementById("txt-second");
txtSeconds.onblur = validate;
</script>
Create a 'parent' function that has subroutines
<script>
var ele = document.getElementById("txt-second");
ele.onblur = function(){
ele.value="";
ele.focus();
}
</script>
If that doesnt work out, checkout this question Two onblur for same input id
Edit: I just tested your code out and it worked for me, problem is once it focuses I can't get the cursor out of that input box...
I am trying to copy the value of the textbox to the textarea However the value gets copied using the javascript function but it disappears from the textarea after a second. What am i doing wrong?Why does it get disappear after being copied?
this is the html:
<html>
<head>
<title>
</title>
<script src="scripts/script.js" type="text/javascript"></script>
</head>
<body>
<form>
<label>Key/Value Pair: </label><input type="text" name="inputText" id="t1"></br></br>
<label>Key/Value List: </label><br>
<textarea name="outputText" rows="10" cols="50" id="t2" ></textarea><br><br>
<input type="submit" value="Add" onClick="fn_copy()" />
</form>
</body>
and this is the javascript code:
function fn_copy()
{
var temp = document.getElementById("t1").value;
if(temp != "")
{
document.getElementById("t2").value = temp;
}
else
alert("Text is Empty");
}
Thank you.
Change your button type to button instead of submit. Otherwise your page will be refreshed (default behavior with submit) and hence the content of your textarea reset.
<input type="button" value="Add" onClick="fn_copy()" />
Your problem is that you are using input of type submit, when you click it, the fuction fn_copy execute, but also do a post request, and that is why the value disappears.
Change the input for a button like that and it will work
function fn_copy()
{
var temp = document.getElementById("t1").value;
if(temp != "")
{
document.getElementById("t2").value = temp;
}
else
alert("Text is Empty");
}
<form>
<label>Key/Value Pair: </label><input type="text" name="inputText" id="t1"><br><br>
<label>Key/Value List: </label><br>
<textarea name="outputText" rows="10" cols="50" id="t2" ></textarea><br><br>
<button type="button" onclick="fn_copy()">Add</button>
</form>
You can sse a working sample here: https://jsfiddle.net/8e5e4wuz/
http://www.w3schools.com/jsref/event_preventdefault.asp
Use preventdefault to stop it from submitting.
Try this. Add any id to the button, for example btn, and do this:
function fn_copy()
{
var temp = document.getElementById("t1").value;
if(temp != "")
{
document.getElementById("t2").value = temp;
}
else
alert("Text is Empty");
}
document.getElementById("btn").addEventListener("click", function(event){
fn_copy();
event.preventDefault();
})
I would like to know if there is better way to this exercice.
Here it is : Create a form that contain a textbox ;after the user enter the text ,all the letters will be converted to lowercase as soon as he or she clicks elsewhere in the form( hint: use change onChange event handler).
I have written this code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event</title>
</head>
<body>
<form>
Username : <input type="text" id="username"><br>
<input type="submit" value="button">
</form>
<script type="text/javascript">
var username = document.getElementById("username");
username.onchange = function(){
username.value = username.value.toLowerCase();
};
</script>
</body>
</html>
Basically i'm replacing the content of the textbox by the formatted
Might be too easy, but setting the text over a style to lowercase transform doesn't allow uppercase :)
function toLower(element) {
if (element && element.value) {
element.value = element.value.toLowerCase();
var target = document.getElementById('realvalue');
target.innerHTML = element.value;
}
}
<input type="text" onblur="toLower(this)" />
<div id="realvalue"></div>
But, if all the letters will be converted to lowercase as soon as he or she clicks elsewhere in the form, your code work correctly...
http://jsfiddle.net/b6xwde62/
<form>
Username : <input type="text" id="username"><br>
<input type="submit" value="button">
</form>
<script type="text/javascript">
var username = document.getElementById("username");
username.onchange = function(){
username.value = username.value.toLowerCase();
};
</script>
I have a textbox and save button. If anything changed on textbox then only save button should be enabled. I am able to take care this using javascript event, but when i select some text and right click and delete that selected text then, I do not get any event. Below is my sample code:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var hiddenfield = document.getElementById("hide").value;
var textboxval = document.getElementById("me").value;
if (textboxval != hiddenfield) {
document.getElementById("xx").disabled = false;
} else {
document.getElementById("xx").disabled = true;
}
}
function load() {
document.getElementById("hide").value = document.getElementById("me").value;
}
</script>
</head>
<body onload="load();">
<input id="me" type="text" value="test test" onkeyup="myFunction()" onmouseup="myFunction()"
onmousedown="myFunction()">
<input type="button" id="xx" value="Save" disabled="disabled" />
<br>
<input id="hide" type="hidden" value="">
</body>
</html>
Is there way to detect if user delete the text via right button click?
Try onchange, since the context-menu control changes the contents.