Create a text box with an auto-expanding width? - javascript

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)" />

Related

onchange must remove value from counter it is storing value

i am creating a voucher, for an Management Program, i have an input field which counts value and add in the last colum, as sum of debits and credits in all rows for that i am using counters to track sum, i am using onchange or onblur click event, it works well it counts wih increase in rows, but when i try to remove the value from input it still couns i counter
here is the code
var credit_counter = 0;
$(document).on('blur', 'input[name="credit[]"]', function () {
idName = $(this).attr('id');
id = idName.substring(6, idName.length);
var value = $(this).val();
credit_counter = credit_counter + Number(value);
var credit_balance = $("#get_credit").val(credit_counter)
});
var debit_counter = 0;
var total_balance = 0;
$(document).on('blur', 'input[name="debit[]"]', function () {
idName = $(this).attr('id');
id = idName.substring(6, idName.length);
var value = $(this).val();
$("#credit" + id).val(value)
debit_counter = debit_counter + Number(value);
var debit_balance = $("#get_debit").val(debit_counter);
});
I want to remove the value in case I erase value from input field thanks
Here is a complete example which achieves what you are looking to do (warning: no styling has been added so it is ugly). You can copy and paste this into a .html file and open it in with the web browser of your choice to see it in action:
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<input placeholder="credit field 1" type="text" name="credit" /><br/>
<input placeholder="credit field 2" type="text" name="credit" /><br/>
<input placeholder="credit field 3" type="text" name="credit" /><br/>
<input placeholder="credit field 4" type="text" name="credit" /><br/>
<input placeholder="debit field 1" type="text" name="debit" /><br/>
<input placeholder="debit field 2" type="text" name="debit" /><br/>
<input placeholder="debit field 3" type="text" name="debit" /><br/>
<input placeholder="debit field 4"type="text" name="debit" /><br/>
<input placeholder="credit total" id="get_credit" type="text" /><br/>
<input placeholder="debit total" id="get_debit" type="text" /><br/>
<script>
$(document).on('blur', 'input[name="credit"]', function () {
var total = 0;
$('input[name="credit"]').each(function( index, element ) {
if(!isNaN($(this).val())){
total += Number($(this).val());
}
$('#get_credit').val(total);
});
});
$(document).on('blur', 'input[name="debit"]', function () {
var total = 0;
$('input[name="debit"]').each(function( index, element ) {
if(!isNaN($(this).val())){
total += Number($(this).val());
}
$('#get_debit').val(total);
});
});
</script>
</body>
</html>
Your issue is that the way you are keeping track of the total debits and total credits does not allow you to know the values stored in each input individually. The problem that creates is that when a value is removed, there is no way for you to know what to subtract from the total. (Likewise, if someone were to change the value from 3 to 30 then your total would go up by 30 instead of 27).
There is definitely more than one way to fix that however the answer I posted is what I believe to be most simple: On blur of the input, iterate through the appropriate inputs and add them together then assign the total to the appropriate input.
Note I've excluded your logic of acting on the ids of the inputs as it is unclear what you're doing with them without further explanation or seeing your view markup. It also seems to be unrelated to the issue you're posting about.
I understood your problem. Can we do like this.
1) Trigger an event on focus.
2) Subtract the focused element value from total.
If user doesn't removed complete value from the input. anyway we are triggering event on blur. So it will take whatever the value remained in the text box and counts that!

html sending parameters to function from id

I'm an absolute beginner and tried to find similar questions but couldn't. Apologies if this has been answered previously.
In my assignment we need to create a form with 2 text fields and 1 button. The fields are for height and width and the idea is that onclick on the button will send the 2 parameters to a function that will change the height + width attributes for a photo. I know I'm doing something wrong because the picture simply disappears. Ideas? Thanks!
<html>
<head>
<script>
function borderResize(height1, width1)
{
document.getElementById('Amos').height = height1;
document.getElementById('Amos').width = width1;
}
</script>
</head>
<body>
<img src="Amos.jpg" id="Amos" />
<form>
<input type="text" id="height" placeholder="Height" />
<input type="text" id="width" placeholder="Width" />
<input type="button" value="click!" onclick="borderResize('height.value', 'width.value')"/>
</form>
</body>
</html>
When you write
onclick="borderResize('height.value', 'width.value')"
in means that on click borderResize function will be invoked with two string arguments, literally strings "height.value" and "width.value". In your case you want something like this
onclick="borderResize(document.getElementById('height').value, document.getElementById('width').value)"
In above case you are selecting element from DOM using getElementById method and then read its value property.
You should learn to use addEventListener(), I would recommend you not to use ugly inline click handler.
The EventTarget.addEventListener() method registers the specified listener on the EventTarget it's called on.
Here is an example with your code.
window.onload = function() {
document.getElementById('button').addEventListener('click', borderResize, true);
}
function borderResize() {
document.getElementById('Amos').height = document.getElementById('height').value;
document.getElementById('Amos').width = document.getElementById('width').value;
}
<img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xpf1/v/t1.0-1/s200x200/11034289_10152822971918167_2916173497205137007_n.jpg?oh=71de7a46a75a946cf1d76e5ab10c1cdc&oe=55889977&__gda__=1434173455_6127f174627ed6014c84e562f47bc44c" id="Amos" />
<input type="text" id="height" placeholder="Height" />
<input type="text" id="width" placeholder="Width" />
<input type="button" id="button" value="click!" />
However as for your immediate problem you can use
onclick="borderResize(document.getElementById('height').value, document.getElementById('width').value)"
onclick="borderResize('height.value', 'width.value')"
here you pass to borderResize strings: 'height.value', 'width.value'.
You may get value of input from function:
function borderResize(height1, width1)
{
document.getElementById('Amos').height = document.getElementById('height').value;
document.getElementById('Amos').width = document.getElementById('width').value;
}

Autofocus With Cursor On End Of Textbox

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

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";
}
};

Categories