Change Input to Upper Case - javascript

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();
}

Related

How to copy text from one textbox to Label

<input type="text" id="Amount" />
<lable id="copy_Amount" > </lable> $
Anything written in "Amount" input , need to written in lable
Pointing out some obvious flaws in the accepted answer. Mainly the use of onkeyup and innerHTML.
<input type="text" id="Amount" />
<!-- there is no lable tag. also label is not used as label so use span instead -->
<span id="copy_Amount"></span>
<script>
//can input text without keyup
document.getElementById("Amount").oninput = function(){
//no need for another lookup - use this
let stringValue = this.value;
//do not use innerHTML due to html injection
document.getElementById("copy_Amount").textContent = stringValue
}
</script>
use keyup event
Correct lable tag label
use text() to set label text
$('#Amount').keyup(function() {
$('#copy_Amount').text($('#Amount').val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="Amount" />
<label id="copy_Amount" > </label> $
You can do this using JQuery.
$('#Amount').change(function() {
$('#copy_Amount').text($('#Amount').val());
});
You can try this
<script>
document.getElementById("Amount").onkeyup = function () {
var stringValue = document.getElementById("Amount").value;
document.getElementById("copy_Amount").textContent = stringValue;
}
</script>

Javascript onclick fails to send value while onfocus of text input

If a user clicks the save button as the next action after typing street data the onblur action intercepts the onclick and does not trigger the save. However, if you add some padding (30px) and click above the word save it works but below the word Save it does not work, the same as with no padding. I'm certain users will go right from typing text in the input field then click Save which will fail unless they first click somewhere else and then click Save. I’ve provide html and javascript example below. Is there a way using javascript to solve this issue?
<html>
<script>
function showstreet() {
var x = document.getElementById('street').value;
alert(x);
}
function focused() {
document.getElementById('title').style.display='';
document.getElementById('street').value='';
}
function blured() {
document.getElementById('title').style.display='none';
if (document.getElementById('street').value == '') {
document.getElementById('street').value='street';
}
}
</script>
<style>
.pad5 { padding:5px; }
.pad30 { padding:30px; }
</style>
<body>
<div id="title" class="pad5" style="display:none;">STREET NAME</div>
<div>
<input id="street" type="text" name="street" value="street" class="pad5"
onfocus="focused()" onblur="blured()">
</div>
<br>
<div>
<input type="button" value="Save" class="pad30" onclick="showstreet()">
</div>
</body>
</html>
I converted this to jsfiddle but I'm not doing something right (newbie) https://jsfiddle.net/eyo63mav/26/
use onMouseDown instead of onClick in your save button. Then onMouseDown will be fired before onBlur
below is working code
function showstreet() {
var x = document.getElementById('street').value;
alert(x);
}
function focused() {
document.getElementById('title').style.display = '';
document.getElementById('street').value = '';
}
function blured() {
document.getElementById('title').style.display = 'none';
if (document.getElementById('street').value == '') {
document.getElementById('street').value = 'street';
}
}
<div id="title" class="pad5" style="display:none;">STREET NAME</div>
<div>
<input id="street" type="text" value="street" class="pad5" onfocus="focused()" onblur="blured()">
</div>
<br>
<div>
<input type="button" value="Save" class="pad30" onclick="showstreet()">
</div>
Styling rarely makes a difference with events -- now, while that's a blanket statement and in lots of cases we find the styling of an inline element such as a link or a paragraph becoming problematic with inline events such as OnClick and OnFocus, in your case, adding thirty pixels to the size of a button is not your problem.
The problem with your code is that the variable you're assigning your #title's value to is local (it's inside the scope of showstreet(), of which can only be accessed by aforementioned function) -- nevermind that, it's never used again. You save a value to it, it alerts the user, and that's it -- it's never reassigned nor reused, so while it'll forever stay as the street name they entered, you'll never see it unless you apply it to something.
It took me a while to figure out what exactly you're trying to save, but I think I've managed it.
Here's the code I've created:
var streetValue = "Your street will appear here.";
function clickedField() {
// Init title
document.getElementById('title').innerHTML = streetValue;
// Reset field
document.getElementById('street').value = '';
}
function saveValue() {
// Reassign streetValue
streetValue = document.getElementById('street').value;
// Checking if value was left empty
if (streetValue === '') {
document.getElementById('title').innerHTML = "Error: No Street Entered!";
} else {
document.getElementById('title').innerHTML = streetValue;
}
}
(I'm not entirely sure what you had onblur for, but it should be very easy to insert back. If you need some help with that, comment on my reply, I'll be happy to.)
Now if we update the HTML with the approprate functions:
<div id="title" class="pad5" style="">STREET NAME</div>
<div>
<input id="street" type="text" name="street" value="street" class="pad5"
onfocus="clickedField()">
</div>
<br>
<div>
<input type="button" value="Save" class="pad30" onclick="saveValue()">
</div>

insert text to selected Textbox use Javascript

I have 2 textBox and 1 button!
I want to insert text to one of these textboxs. When I click to textbox_1 and click button, mytext will appear at textbox_1. When I click to textbox_2 and click button, mytext will appear at textbox_2.
How can I do this by using JavaScript?
Please help me! I'm new on JavaScript!
put id's of the two textboxes as textbox_1 and textbox_2 and put onclick='onCLickButton();' on the <button> tag
and write the following code in the script
var text_to_be_inserted = "sample";
function onCLickButton(){
document.getElementById("textbox_1").value='';
document.getElementById("textbox_2").value='';
if(document.getElementById("textbox_1").focused){
document.getElementById("textbox_1").value=text_to_be_inserted;
}
else if(document.getElementById("textbox_2").focused){
document.getElementById("textbox_2").value=text_to_be_inserted;
}
else{
// do nothing
}
}
Edited
Please accept my apologies actually I am used to use these functions as I have my own js file having these functions.
please add onfocus='onFocusInput(this);' in the <input> tags and add the following code in the script
function onFocusInput(object){
document.getElementById("textbox_1").focused=false;
document.getElementById("textbox_2").focused=false;
object.focused = true;
}
<html>
<head>
<script type="text/javascript">
var index = false;
var text = "This text shifts to text box when clicked the button";
function DisplayText(){
if(!index){
document.getElementById("txt1").value = text;
document.getElementById("txt2").value = "";
}
else{
document.getElementById("txt2").value = text;
document.getElementById("txt1").value = "";
}
index = index ? false : true;
}
</script>
</head>
<body>
<input type="text" id="txt1"/>
<input type="text" id="txt2"/>
<input type="button" value="Change Text" onclick="DisplayText()"/>
</body>
</html>
Take a look at the onFocus() attribute for the INPUT tag - and think about keeping track of what was last given the focus. I'm being a little vague as this sounds a lot like homework.
It isn't the prettiest / most delicate solution, but it works and you can build off it to fulfill your needs.
<script>
var field = 0;
function addText(txt){
if(field === 0) return false;
field.value = txt;
}
</script>
For a form such as
<form>
<input type="text" name="box1" id="box1" onfocus="field=this;" />
<input type="text" name="box2" id="box2" onfocus="field=this;" />
<input type="button" onclick="addText('Hello Thar!');" />
</form>

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