Autofocus With Cursor On End Of Textbox - javascript

I want to put autofocus on a html textbox such that the cursor points to the end of some text already present in the textbox.
I know what the autofocus attribute does. And I have also seen put cursor at end of text input's value which answers how to put cursor at the end, But the textbox is not autofocussed upon page reload. How can I do both - autofocus the textbox upon page reload and put cursor to end of text ?
Code :
<textarea id="txtArea" style="width:106%; height:100px" align="center" name="task1" onkeypress="onTestChange();" onfocus="this.value = this.value;" autofocus ><?php echo $_GET["task"];?></textarea>
I want to put Cursor after the text echoed. It is not the value of the textarea.
Also the textbox I referred to is Textarea.

Please use this code and run in your browser
$(document).ready(function() {
var input = $("#test");
var len = input.val().length;
input[0].focus();
input[0].setSelectionRange(len, len);
});
<input type="text" id="test" autofocus value="value text" />

try to run this simple code and see u will notice that first text box will be focused and not the second
<input type="text" autofocus value="value text" onfocus="this.value = this.value;"/>
<input type="text" autofocus value="value text" onfocus="this.value = this.value;"/>

Something like this. Focus it, and set the value again.
<input type="text" value="this holds a value" id="element"/>
<script>
$(window).ready(function(){
$("#element").focus();
$("#element").val($("#element").val());
});
</script>

$( document ).ready(function() {
var t =$("#txtID");
t.focus().val(t.val());
});

Check chris G's answer on this question. Call function after you have set the focus to the textbox:
function SetCaretAtEnd(elem) {
var elemLen = elem.value.length;
// For IE Only
if (document.selection) {
// Set focus
elem.focus();
// Use IE Ranges
var oSel = document.selection.createRange();
// Reset position to 0 & then set at end
oSel.moveStart('character', -elemLen);
oSel.moveStart('character', elemLen);
oSel.moveEnd('character', 0);
oSel.select();
}
else if (elem.selectionStart || elem.selectionStart == '0') {
// Firefox/Chrome
elem.selectionStart = elemLen;
elem.selectionEnd = elemLen;
elem.focus();
} // if
} // SetCaretAtEnd()

The answer to your link already auto focused on page load.
<input type="text" autofocus value="value text" onfocus="this.value = this.value;"/>
JS Fiddle

Related

I want a textbox to be disabled when a textarea has nothing written inside it

I want to be able to have a texbox enabled only when their is text written inside a certain textarea.
I tried using the onkeydown attribute for the textarea with a method I wrote. It works when I start typing (the button is enabled), but when I delete all the text and the textarea is empty, the button is still enabled.
//This is the html code for the textbox and textarea
<input type="text" id="testUser" disabled="disabled" placeholder="username">
<textarea rows="15" cols="105" id="sql" onkeydown="enableUsername()">
//This is the Javascript method I wrote
function enableUsername(){
var ele = document.getElementById("sql").value;
//document.getElementById("sql").value=+ele.length;
var flag = 0;
if(ele.length>0){
document.getElementById("testUser").disabled=false;
}
else{
document.getElementById("testUser").disabled=true;
}
}
If possible I would rather not have to use the onkeydown attribute for the textarea because I have another functionality I would like to implement later.
You can find a working snippet below -
var txtarea = document.getElementById('sql');
var username = document.getElementById('testUser');
function enableUsername() {
if (txtarea.value.length > 0) {
username.disabled = false;
} else {
username.disabled = true;
}
}
<input type="text" id="testUser" disabled="true" placeholder="username" />
<textarea rows="15" cols="105" id="sql" onkeydown="enableUsername()"></textarea>
Just replace onkeydown by onkeyup.
<input type="text" id="testUser" disabled="disabled" placeholder="username">
<textarea rows="15" cols="105" id="sql"></textarea>
var ele = document.getElementById("sql");
function enableUsername() {
var flag = 0;
if (ele.value.length > 0){
document.getElementById("testUser").disabled=false;
} else{
document.getElementById("testUser").disabled=true;
}
}
ele.addEventListener("keyup", enableUsername, false);

jquery mutiple text field update in form

i need to create a html form where upon entering value on one input text field should automatically enter calculated value in another input text field using jquery.I found a source http://pastie.org/2607417,where i have input text value which output in a paragraph... Any help would be greatly appreciated
$("input[name='textbox1']").blur(function() {
//if u want to perform any calculation
var textbox2val=.....;
//if u want to just paste the textbox1 value
var textbox2val=$(this).val();
$("input[name='textbox2']").val(textbox2val);
});
Try
<input type="text" value="" id="text1" />
<p></p>
<div></div>
<script>
$("#text1").keyup(function () {
var value = $(this).val();
value2 = value*2;
value3 = value*3.7;
$("p").text(value2);
$("#text2").val(value3);
});
</script>
<input type="text" value="" id="text2" />

Change Input to Upper Case

JS:
<script type="text/css">
$(function() {
$('#upper').keyup(function() {
this.value = this.value.toUpperCase();
});
});
</script>
HTML
<div id="search">
<input type="radio" name="table" class="table" value="professor" tabindex="1" /> Professor
<input type="radio" name="table" class="table" value="department" tabindex="2" /> Department
<input type="radio" name="table" id="upper" class="table" value="course" tabindex="3" /> Course
<input type="text" name="search" class="keywords" value="Select an option..." onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?':this.value;" tabindex="4" />
<div id="content"> </div>
</div>
Why is this still not working?? Just trying to call div ".keywords" from JS.
I think the most elegant way is without any javascript but with css. You can use text-transform: uppercase (this is inline just for the idea):
<input id="yourid" style="text-transform: uppercase" type="text" />
Edit:
So, in your case, if you want keywords to be uppercase change:
keywords: $(".keywords").val(), to $(".keywords").val().toUpperCase(),
Javascript string objects have a toLocaleUpperCase() function that makes the conversion itself easy.
Here's an example of live capitalisation:
$(function() {
$('input').keyup(function() {
this.value = this.value.toLocaleUpperCase();
});
});
Unfortunately, this resets the textbox contents completely, so the user's caret position (if not "the end of the textbox") is lost.
You can hack this back in, though, with some browser-switching magic:
// Thanks http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea/
function getCaretPosition(ctrl) {
var CaretPos = 0; // IE Support
if (document.selection) {
ctrl.focus();
var Sel = document.selection.createRange();
Sel.moveStart('character', -ctrl.value.length);
CaretPos = Sel.text.length;
}
// Firefox support
else if (ctrl.selectionStart || ctrl.selectionStart == '0') {
CaretPos = ctrl.selectionStart;
}
return CaretPos;
}
function setCaretPosition(ctrl, pos) {
if (ctrl.setSelectionRange) {
ctrl.focus();
ctrl.setSelectionRange(pos,pos);
}
else if (ctrl.createTextRange) {
var range = ctrl.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
// The real work
$(function() {
$('input').keyup(function() {
// Remember original caret position
var caretPosition = getCaretPosition(this);
// Uppercase-ize contents
this.value = this.value.toLocaleUpperCase();
// Reset caret position
// (we ignore selection length, as typing deselects anyway)
setCaretPosition(this, caretPosition);
});
});
Ultimately, it might be easiest to fake it. Set the style text-transform: uppercase on the textbox so that it appears uppercase to the user, then in your Javascript apply the text transformation once whenever the user's caret focus leaves the textbox entirely:
HTML:
<input type="text" name="keywords" class="uppercase" />
CSS:
input.uppercase { text-transform: uppercase; }
Javascript:
$(function() {
$('input').focusout(function() {
// Uppercase-ize contents
this.value = this.value.toLocaleUpperCase();
});
});
Hope this helps.
If you purpose it to a html input,
you can easily do this without the use of JavaScript! or any other JS libraries.
It would be standard and very easy to use a CSS tag text-transform:
<input type="text" style="text-transform: uppercase" >
or you can use a bootstrap class named as "text-uppercase"
<input type="text" class="text-uppercase" >
In this manner, your code is much simpler!
Solutions using value.toUpperCase seem to have the problem that typing text into the field resets the cursor position to the end of the text. Solutions using text-transform seem to have the problem that the text submitted to the server is still potentially lowercase. This solution avoids those problems:
function handleInput(e) {
var ss = e.target.selectionStart;
var se = e.target.selectionEnd;
e.target.value = e.target.value.toUpperCase();
e.target.selectionStart = ss;
e.target.selectionEnd = se;
}
<input type="text" id="txtTest" oninput="handleInput(event)" />
Can also do it this way but other ways seem better, this comes in handy if you only need it the once.
onkeyup="this.value = this.value.toUpperCase();"
try:
$('#search input.keywords').bind('change', function(){
//this.value.toUpperCase();
//EDIT: As Mike Samuel suggested, this will be more appropriate for the job
this.value = this.value.toLocaleUpperCase();
} );
I think the most easiest way to do is by using Bootstrap's class ".text-uppercase"
<input type="text" class="text-uppercase" />
I couldn't find the text-uppercase in Bootstrap referred to in one of the answers. No matter, I created it;
.text-uppercase {
text-transform: uppercase;
}
This displays text in uppercase, but the underlying data is not transformed in this way.
So in jquery I have;
$(".text-uppercase").keyup(function () {
this.value = this.value.toLocaleUpperCase();
});
This will change the underlying data wherever you use the text-uppercase class.
onBlur="javascript:{this.value = this.value.toUpperCase(); }
will change uppercase easily.
Demo Here
This answer has a problem:
style="text-transform: uppercase"
it also converts the place holder word to upper case which is inconvenient
placeholder="first name"
when rendering the input, it writes "first name" placeholder as uppercase
FIRST NAME
so i wrote something better:
onkeypress="this.value = this.value + event.key.toUpperCase(); return false;"
it works good!, but it has some side effects if your javascript code is complex,
hope it helps somebody to give him/her an idea to develop a better solution.
Here we use onkeyup event in input field which triggered when the user releases a Key. And here we change our value to uppercase by toUpperCase() function.
Note that, text-transform="Uppercase" will only change the text in style. but not it's value. So,In order to change value, Use this inline code that will show as well as change the value
<input id="test-input" type="" name="" onkeyup="this.value = this.value.toUpperCase();">
Here is the code snippet that proved the value is change
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form method="get" action="">
<input id="test-input" type="" name="" onkeyup="this.value = this.value.toUpperCase();">
<input type="button" name="" value="Submit" onclick="checking()">
</form>
<script type="text/javascript">
function checking(argument) {
// body...
var x = document.getElementById("test-input").value
alert(x);
}
</script>
</body>
</html>
<input id="name" data-upper type="text"/>
<input id="middle" data-upper type="text"/>
<input id="sur" data-upper type="text"/>
Upper the text on dynamically created element which has attribute
upper and when keyup action happens
$(document.body).on('keyup', '[data-upper]', function toUpper() {
this.value = this.value.toUpperCase();
});
**JAVA SCRIPT**
<html>
<body>
<script>
function #ToCaps(obj)
{
obj.value=obj.value.toUpperCase();
}
</script>
<input type="text" onkeyup=#ToCaps(this)"/>
</body>
</html>
**ASP.NET**
Use a css style on the text box, write css like this:
.ToCaps { text-transform: uppercase; }
<asp:TextBox ID="TextBox1" runat="server" CssClass="ToCaps"></asp:Te writxtBox>
**OR**
simply write this code in textbox
<asp:TextBox ID="TextBox1" runat="server" style="text-transform:uppercase"></asp:TextBox>
**1.Note you don't get intelligence until you type up to style="**
Javascript has a toUpperCase() method. http://www.w3schools.com/jsref/jsref_toUpperCase.asp
So wherever you think best to put it in your code, you would have to do something like
$(".keywords").val().toUpperCase()
you can try this
HTML
<input id="pan" onkeyup="inUpper()" />
javaScript
function _( x ) {
return document.getElementById( x );
}
// convert text in upper case
function inUpper() {
_('pan').value = _('pan').value.toUpperCase();
}

How to clear text field on focus of text field

I want to clear the text field when the user clicks on that
<input name="name" type="text" id="input1" size="30" maxlength="1000" value="Enter Postcode or Area" onfocus=="this.value=''" />
Unless you are doing something specific where you only want to clear onclick, I would suggest (as others have noted) to use the onfocus actions instead. This way if someone is using tab to navigate it will also clear the default text.
You can also use onblur to check if it's empty to bring it back:
<input type="text" value="Default text" name="yourName" onfocus="if(this.value == 'Default text') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Default text'; }">
To do this you will need to use a scripting language, probably javascript. Here an example
<input type='text' value'Some text' onclick='javascript: this.value = ""' />
Hope this helps.
Edit:
To meet what David is explain here is a second example in case that is what you are looking for
<script type='javascript'>
var clear = true;
function clear(obj)
{
if(clear)
{
obj.value = '';
clear = false;
}
}
</script>
<input type='text' value'Some text' onfocus='clear(this);' />
Using jQuery library:
<input id="clearme" value="Click me quick!" />
$('#clearme').focus(function() {
$(this).val('');
});
Or you can simply use the placeholder attribute
For example<input name="name" type="text" id="input1" size="30" maxlength="1000" placeholder="Enter Postcode or Area"/>
You can use <input ... onfocus="this.value='';"/>.
This way, the field will be cleared when it gains focus. However, if you only want to clear it when user clicks on it (i.e. not when the field gains focus with the keyboard for example), then use onclick instead of onfocus.
However, as pointed by David Dorward in a comment, this behavior may not be expected by the user. So be careful to set this feature on really specific fields (such as search field).
This is how I use it for a temperature converter/calculator - when the user types (keyup), the text input box calculates using the assigned function; when the user selects the other text input (there are only two inputs), the selected text input will clear.
HTML:
<p class="celcius"><h2 style="color:#FFF">Input:</h2>
<input name="celsius" type="text" class="feedback-input" placeholder="Temperature (Celsius)" onkeyup="Conversion()" onfocus="this.value='';" id="celsius" />
</p>
<hr>
<h2 style="color:#FFF">Result:</h2>
<p class="fahrenheit">
<input name="fahrenheit" type="text" class="feedback-input" id="fahrenheit" onkeyup="Conversion2()" onfocus="this.value='';"placeholder="Temperature (Fahrenheit)" />
</p>
JavaScript:
function Conversion() {
var tempCels = parseFloat(document.getElementById('celsius').value);
tempFarh =(tempCels)*(1.8)+(32);
document.getElementById('fahrenheit').value= tempFarh;
}
function Conversion2() {
var tempFarh = parseFloat(document.getElementById('fahrenheit').value);
tempCels =(tempFarh - 32)/(1.8);
document.getElementById('celsius').value= tempCels;
}
try this ,it worked for me
add this into your input tag
<code>
onfocus="this.value='';"</code>
for example if your code is
<code>
<input type="text" value="Name" /></code>
use it like this
<code><input onfocus="this.value='';" type="text" value="Name" /></code>
function Clear (x) {if (x.cleared) {} else {x.value = ""; x.cleared = true}}
onfocus = "Clear (this)"
Add a following script to your js file:
var input1 = document.getElementById("input1")
input1.onfocus = function() {
if(input1.value == "Enter Postcode or Area") {
input1.value = "";
}
};
input1.onblur = function() {
if(input1.value == "") {
input1.value = "Enter Postcode or Area";
}
};

Create a text box with an auto-expanding width?

How would I go about creating a textbox with an auto-expanding width to fit it's content?
I keep finding plenty of info on height based expansions but not much on width.
I'd also like it to apply to every textbox on the page and not just specific ones.
Not sure if this is what you had in mind, but shouldn't this work?
<script language="javascript">
function expand(f)
{
f.size = f.size + 1;
}
</script>
<input type="text" size="20" onkeyup="expand(this)" />
If you want backspace key handling use this:
<input type="text" value="Sample text" onkeyup="(event.keyCode!==8)?this.size++:this.size--;" size="20">
If you want backspace key handling and to ignore arrow keys use this one:
<input type="text" value="Sample text" onkeyup="if(event.keyCode==8){this.size--;}else if(event.keyCode!==37&&event.keyCode!==38&&event.keyCode!==39&&event.keyCode!==4‌​0){this.size++;}" size="6">
I think a better solution would be to check the length of the text and modify the textbox if the text was too long rather than checking for every type of key event that shouldn't trigger an expansion. An example:
<script type="text/javascript">
function expand(textbox){
var minSize = 20;
var contentSize = textbox.value.length;
if(contentSize > minSize)
{
textboxSize = contentSize;
}
else
{
textboxSize = minSize;
}
}
</script>
<input type="text" size="20" onkeyup="expand(this)" />

Categories