Text input focus loss event - javascript

I have the following page. I want to restore the input text if it has not been changed (when the focus is lost). How can I do this?
<html>
<head>
</head>
<body>
<script type="text/javascript">
function clearTextArea(object){
object.value = "";
}
</script>
<input type="text" id="option" value="test" onfocus="clearTextArea(this);"></input>
</body>
</html>

Is there anything against using an
<input (...) onblur="this.value = 'test'">
listener?
(You can also do the same thing using a "placeholder" attribute if youre working with HTML5)

At your clearTextArea method take the current text in the text area and store in into a hidden field or a cookie. Then at on blur event, check if the value changed.

Related

How to get text from an input element and change some other elements value?

I have an input element:
<input type="text" />
How can I get text from this input? and then how to print it somewhere else in the page or how to change text of another element in the page to it?
you need to write an id to input like a < input type="text" id="txtname" >, now in javascript you can get and set text=
$('#txtname').val() <- get text from input
$('#txtname').val('some text') <- set text to input
or
$(input[type="text]").val() but this select all input with type text
Try the following
var inputElem=document.getElementsByTagName('input')[0];
inputElem.style.textAlign='center';
var textInput=inputElem.value;
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<input type="text">
<!-- End your code here -->
</body>
</html>
Try this:
<input type="text" id="inputID">
To get text from input box using jquery
$('inputID').val();
To get text from input box without jquery
document.getElementById('inputID').value;
<input type='text' name='myInput' id='myInput' />
In order to get inputs value using javascript you need to do select it with getElementById() method of document object:
var inputValue = document.getElementById("myInput").value;
Now that you've fetched & stored it in a variable, It seems you want to put it somewhere in page. To achieve this, you should first find the element which you want to change its value & then assign inputValue to its text or innerHTML:
//Assume we have an `h1` element in our desired position in the doc
<h1 id="targetPosition">....</h1>
Now we'll assign inputValue to h1:
document.getElementById("targetPosition").innerHTML = inputValue;

Input text box focus on blur event

Actually I'm trying to set focus on text-box when focus is lost.The reason behind this is that there is requirement to forcefully set focus on text-box if some validation fails(like empty field validation) and validation is perform on blur event of that text box.
I have tried it on fiddle also but it seems like focus is there but cursor is not blinking.
Please refer link : http://jsfiddle.net/zHeJY/
Please let me know the reason behind this and solution for same.
Thanks in advance.
First: This is a bad idea to trap user inside an input unless validation passes! Users should be allowed to focus whatever they want. Ideally, you can prevent a form submission if validation fails.
Problem: (1) You don't have any other element in the fiddle you provided. (2) You are not validating anything, just doing an endless loop for blur-focus cycle!
Solution:
See this fiddle: http://jsfiddle.net/zHeJY/7/
With a proper validation routine in place (and another element available), it will work.
HTML:
<input id="setFocus"/>
<input id="other" />
JS:
$("#setFocus").on("blur", function(e) {
if (! validate(this)) {
$(this).focus();
}
});
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js">
</script>
<script type="text/javascript">
$( document ).ready(function() {
$(document).on('blur', "#setFocus", function (e) {
$(this).focus();
});
});
</script>
</head>
<body>
<input type="text" id="setFocus"/>
<input type="text" id="set"/>
</body>
</html>
try this
HTML
<div id="something">
<input type="text" id="setFocus"/>
<input type="text" id="setFocus1"/>
</div>
JS
$("#something").mouseup("blur",function(){
$(this).children(":first").focus();
})
you should have parent element for this on click of any where you will get the required result

Focus the first input on load only if no input is focused

I'm trying to set a default focus for all the pages of my site but without changing the focus on page reload.
I mean:
User opens a page.
Focus is automatically set on the 1st input.
User changes focus to the 3rd input.
User refreshes the page.
Focus must not change to the 1st input again. (This is the requirement I fail to accomplish).
My current code is as follows:
$(document).ready(function() {
if($(':focus').length === 0) {
$(':input:not([type="hidden"]):first').focus();
}
});
The condition is true every time!
$(document).ready({
window.onload=function(){
if(session.Storage.getItem("text3")){//if key= text3 is set,then change the focus to 3rd text box.
$('#your3rdTextID').focus();
}
$('#your3rdTextID').focus(function(){
session.Storaage.setItem("text3","selected")//here you set the key as text3 and value as selected for later use.
});
});
You can provide with your own custom conditions.This is just a small example.Hope it helped you.Good luck with your project.
LINK-->HTML5 Local storage vs. Session storage
LINK-->http://www.w3schools.com/html/html5_webstorage.asp
This will work (tested in latest Chrome, IE7 and IE10). Sets a cookie on focus remembering the last focused element, if not, it defaults to the first. It relies on jquery.cookie.js (usage explained in this SO answer). Here is the full HTML+JS source of a minimal working example. Consider changing the cookie name and the input selector (currently 'input'):
<!doctype html>
<html>
<head>
<title>focus test</title>
<meta charset="utf-8" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $input = $('input'), // get all the inputs
cookieName = 'lastInputFocusIndex', // for consistency
lastIndex = $.cookie(cookieName) || 0; // get the last known index, otherwise default to zero
$input.on('focus',function(){ // when any of the selected inputs are focused
if ( $(this).attr('type') !== 'submit' ) {
$.cookie(cookieName,$input.index(this)); // get their index in the $input list and store it
}
});
$input.eq(lastIndex).focus(); // when the page loads, auto focus on the last known index (or the default of 0)
});
</script>
</head>
<body>
<form method="get" action="">
<p><input type="text" name="first" /></p>
<p><input type="text" name="second" /></p>
<p><input type="text" name="third" /></p>
<p><input type="submit" value="Go" /></p>
</form>
</body>
</html>
Alternatively, you could write your own raw cookies instead of using the cookie helper jQuery plugin; I used it to simplify things.

How to execute a function every time the content is changed in an input field using JQuery?

I have a text field <input type="text" id="search" /> and I would like to execute a JavaScript function every time the user change the content in it (letter by letter). How can I do this using jQuery?
I tried to implement the function as the answer to Using JQuery, how do you detect if the value of a text input has changed while the field still has focus? but nothing happens for me.
Here is my HTML:
<html>
<head>
<script type="text/javascript" src="/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="/search.js"></script>
</head>
<body>
<form>
<input type="text" name="search" id="search" />
</form>
</body>
</html>
My search.js is:
var target = $('#search'), val = target.val();
function search()
{
alert('search');
}
target.keyup(search);
I have also tried with (nothing happens):
$('input[name=search]').change(function() {
alert('changed');
})
And if I try just adding some HTML using jQuery, it works:
$(function(){
$("<p>hello</p>").insertAfter("#search");
})
The change event doesn't fire until the control loses focus. If you are only interested in text, you can use .keypress() to do something before the contents change, or .keyup() to do something afterwards.
Here is an example using keypress in jsfiddle: http://jsfiddle.net/R6vmZ/

The fastest way to set the focus on a textfield

what is the fastest (the really fastest) way to set the focus on a textfield?
My page looks like
<html>
<head> ... </head>
<body>
... content ...
<input type="text" id="ct_one" name="ct_pet[]" value="" />
... content ...
<script> ... load jquery and jquery_ui ... </script>
</body>
</html>
Thanks in advance!
Peter
You can put a script right after the element, that sets focus to it. That would set focus at the earliest possible moment, i.e. right after the element is created.
<input type="text" id="ct_one" name="ct_pet[]" value="" />
<script type="text/javascript">
document.getElementById('ct_one').focus();
</script>
Assign value 0 to attribute tabindex for your input field.
http://www.w3.org/TR/html4/interact/forms.html#adef-tabindex
the accepted answer here seems to be "the really fastest" :)
Set input field focus on start typing
JSFiddle example

Categories