I am trying to make the first character in a input field uppercase.
So far I have tried:
input:first-letter {text-transform:capitalize !important}
input:first-letter {text-transform:uppercase !important}
I have also tried to make the input field styled display:block; and display:inline-block; but with no luck.
I am using the latest version of chrome. If I look in the inspector the
input:first-letter {text-transform:capitalize !important} is flagged to be active but it does not work.
I am open to any Jquery solutions as well
Thanks,
:first-letter wont work on input field. but it works without that.
So change it as input {text-transform:capitalize;} it works fine.
see demo
it works fine without !important
input {text-transform:capitalize;}
<input/>
As you have mentioned in pure css way i have added the above method
Limitation: It will capitalize all words in the input box. In pure CSS it is not possible to capitalize only the first word as of now. you have to try the jquery way to do this as given below
Using jquery:-
using keyup event
$('input').keyup(function(){
if($(this).val().length>0){
var character = $(this).val().charAt(0);
if(character!=character.toUpperCase()){
$(this).val($(this).val().charAt(0).toUpperCase()+$(this).val().substr(1));
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input/>
To work even on mouse events:- (like cut paste in mouse)
Using propertychange event by $('input').bind('input propertychange', function() {
$('input').bind('input propertychange', function() {
if($(this).val().length>0){
var character = $(this).val().charAt(0);
if(character!=character.toUpperCase()){
$(this).val($(this).val().charAt(0).toUpperCase()+$(this).val().substr(1));
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input/>
You could use an onKeypress listener and capitalize the first character of the value. Keep in mind this function will run every time a key is pressed in that input
$( "#keypress" ).keypress(function() {
var val = $(this).val();
val = val.substr(0, 1).toUpperCase() + val.substr(1);
$(this).val(val);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="keypress">
For text output, you can easily make only the first character uppercase by css.
.mytable td {
text-transform:lowercase;
}
.mytable td:first-letter {
text-transform:uppercase;
}
Related
Is there any way that i could add a background color after placing a content inside an input field? Just like what happens when an autocomplete works.
Thanks!
There are a few ways you could achieve this. You could make the input mandatory by adding the required attribute. Doing this means that as soon as the user enters anything into the field, it is now in the valid state and you can target it in your CSS using the :valid pseudo-class:
input:valid{
background:#ff9;
}
<input required>
Or, if you don't want to make the field mandatory and as others have suggested, you could set the new background-color when the field receives focus. To prevent it from reverting to its initial color when it loses focus, you will need to add a transition to the background, setting the transition-delay to some ridiculously high number when the input is in its normal state and resetting it to 0s when it is focused. Obviously, though, this change will occur whether or not the user actually enters anything in the field or not.
input{
transition-delay:9999s;
transition-property:background;
}
input:focus{
background:#ff9;
transition-delay:0s;
}
<input>
If neither of those options suit your needs then you will probably need to resort to using JavaScript to add or remove a class, depending on whether or not the value of the input is empty.
document.querySelector("input").addEventListener("input",function(){
this.value?this.classList.add("filled"):this.classList.remove("filled");
},0);
.filled{
background:#ff9;
}
<input>
Html
First name: <input type="text" name="firstname">
Css
input:focus {
background-color: yellow;
}
Demo in JsFiddle
Here is a solution with pure javascript
var input = document.getElementById("test");
input.addEventListener('input', function() {
if (input.value)
input.style.backgroundColor = '#90EE90';
else
input.style.backgroundColor = '#fff';
});
<input id="test" type="text" value="">
Add a Css class like
.myCSSClass
{
background-color:red;
}
Now using jquery on blur function you add this class
$("#myTextBox").on('blur',function(){
if($("#myTextBox").val()==""){
if($("#myTextBox").hasClass("myCSSClass")){
$("#myTextBox").removeClass("myCSSClass");
}
}
else
{
$("#myTextBox").addClass("myCSSClass")
}
});
Using Jquery,
$( "#target" ).blur(function() {
$( "#target" ).css('background-color','red');
});
DEMO
I was wondering how can i automatically make first character of the word in an input area
Currently my code is
Name:<input type='text' name='name' class='name' placeholder='Enter your name here'/>
You can try this: DEMO
Name:<input type='text' name='name' class='name' style="text-transform: capitalize;" placeholder='Enter your name here'/>
or add text-transform: capitalize; in your name in css.
The problem with using CSS (text-transform: capitalize) is that when the form gets submitted, the name will be submitted with a lowercase name.
The CSS works well for cosmetics but not for functionality.
You can use jQuery to force capitalization functionality in your input boxes:
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
$('.name').keyup(function(event) {
var textBox = event.target;
var start = textBox.selectionStart;
var end = textBox.selectionEnd;
textBox.value = textBox.value.charAt(0).toUpperCase() + textBox.value.slice(1).toLowerCase();
textBox.setSelectionRange(start, end);
});
});
</script>
Put this code between the <head> </head> on the page where your form is located.
Above jQuery will also force ALL CAPS to Capitalize.
Check out the Fiddle here: https://jsfiddle.net/cgaybba/6rps8hfo/
I think it should also be mentioned that if the form is on mobile, you can just use the autocapitalize attribute. see here for documentation
Try this
HTML CODE
<input type='text' name='name' class='name' placeholder='Enter your name here'/>
CSS CODE
<style>
.name
{
text-transform:capitalize;
}
</style>
Update you css
.name { text-transform: capitalize; }
The good side of using JS is that when the user submits the form, it retains the capitalized input values, but using css when the form is submitted, it looses the capitalized values (for frontend only).
Note for CSS: make sure you don't have any overriding styles else use !important.
//For CSS
input { text-transform: capitalize }
//For JS
$('.your-input').on('change keydown paste', function(e) {
if (this.value.length = 1) {}
var $this_val = $(this).val();
this_val = $this_val.toLowerCase().replace(/\b[a-z]/g, function(char) {
return char.toUpperCase();
});
$(this).val(this_val);
});
Just include → style="text-transform:capitalize;" inside your input tag.
Div don't have a placeholder attribute
<div id="editable" contentEditable="true"></div>
I want <Please your enter your Name> to show in DIV when the User backspace the whole text in the DIV, or no text on inside, How can I do it?
Here is a pure CSS only solution:-
<div contentEditable=true data-ph="My Placeholder String"></div>
<style>
[contentEditable=true]:empty:not(:focus):before{
content:attr(data-ph)
}
</style>
Here, we basically select all contentEditable <divs> that are empty & blurred. We then create a pseudo element before the CSS selection (the editable div) and fix our placeholder text (specified the data-ph attribute) as its content.
If you are targeting old school CSS2 browsers, change all occurrences of data-ph to title
Correction.......the :empty selector is not supported in IE version 8 and earlier.
What I find in other answers is that when using :not(:focus) pseudo class, I have to click again in order to get the blinking cursor and be able to type. Such issue doesn't happen if I click on an area other than the placeholder.
My workaround is simply removing :not(:focus). Even though in this way the placeholder will still be there after I click on the editable div, I'm able to type no matter where in the div I click, and the placeholder disappears immediately after I type something.
BTW, I inspected YouTube's comment div implementation, seems they are doing the same thing, e.g. #contenteditable-root.yt-formatted-string[aria-label].yt-formatted-string:empty:before
.editableDiv1,
.editableDiv2 {
border-bottom: 1px solid gray;
outline: none;
margin-top: 20px;
}
.editableDiv1[contentEditable="true"]:empty:not(:focus):before {
content: attr(placeholder)
}
.editableDiv2[contentEditable="true"]:empty:before {
content: attr(placeholder)
}
<div class="editableDiv1" contentEditable=true placeholder="If you click on this placeholder, you have to click again in order to get the blinking cursor and type..."></div>
<div class="editableDiv2" contentEditable=true placeholder="Click on placeholder is fine, it'll disappear after you type something..."></div>
You can try this one !
html:
<div contentEditable=true data-text="Enter name here"></div>
css:
[contentEditable=true]:empty:not(:focus):before{
content:attr(data-text) }
check it out (demo)
in HTML
<div id="editable" contenteditable="true">
<p>Please your enter your Name</p>
</div>
in JavaScript
jQuery.fn.selectText = function(){
var doc = document;
var element = this[0];
console.log(this, element);
if (doc.body.createTextRange) {
var range = document.body.createTextRange();
range.moveToElementText(element);
range.select();
} else if (window.getSelection) {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);
}
};
$("#editable").click(function() {
$("#editable").selectText();
});
jsFiddle
I have a HTML unsorted list which I capture its “on click” event. When a list item is clicked on I want to change that items font setting to bold so that the user gets a visual indicator that it’s been selected. Is this possible?
<li onclick="this.style.fontWeight= 'bold'">
Or do you want to change it back to regular when another li is clicked? I think you should use jQuery then (it's possible in regular javascript but this is just so much easier)
$('li').click(function () {
$(this).siblings('li').css("fontWeight", "normal");
$(this).css("fontWeight", "bold");
});
Or even easier, just add a class:
CSS: .selected { font-weight: bold }
jQuery:
$('li').click(function () {
$('li.selected').removeClass('selected');
$(this).addClass('selected');
});
In my site, I would like to implement a textbox where people can input a set of strings separated by a separator character.
For example the tags textbox at the bottom of this page: tags(strings) delimited by space(separator).
To make it more clear to the user, it would make a lot of sence to give each string a different background color or other visual hint.
I don't think this is possible with a regular input[text] control.
Do you deem it possible to create something like that with javascript? Has somebody done this before me already? Do you have any other suggestions?
Basic Steps
Put a textbox in a div and style it too hide it.
Make the div look like a text box.
In the onClick handler of the div, set the input focus to the hidden text box.
Handle the onKeyUp event of the hidden text box to capture text, format as necessary and alter the innerHtml of the div.
Tis quite straightforward. I'll leave you to write your formatter but basically you'd just splitString on separator as per the Semi-Working-Example.
Simple Outline
<html>
<head>
<script language="javascript" type="text/javascript">
function focusHiddenInput()
{
var txt = document.getElementById("txtHidden");
txt.focus();
}
function formatInputAndDumpToDiv()
{
alert('Up to you how to format');
}
</script>
</head>
<body>
<div onclick="focusHiddenInput();">
Some label here followed by a divved textbox:
<input id="txtHidden" style="width:0px;" onKeyPress="formatInputAndDumpToDiv()" type="text">
</div>
</body>
</html>
Semi-Working Example
You still need to extend the click handlers to account for tag deletion/editing/backspacing/etc via keyboard.... or you could just use a click event to pop up another context menu div. But with tags and spacer ids identified in the code below that should be pretty easy:
<html>
<head>
<script language="javascript" type="text/javascript">
var myTags=null;
function init()
{
document.getElementById("txtHidden").onkeyup= runFormatter;
}
function focusHiddenInput()
{
document.getElementById("txtHidden").focus();
}
function runFormatter()
{
var txt = document.getElementById("txtHidden");
var txtdiv = document.getElementById("txtBoxDiv");
txtdiv.innerHTML = "";
formatText(txt.value, txtdiv);
}
function formatText(tagText, divTextBox)
{
var tagString="";
var newTag;
var newSpace;
myTags = tagText.split(' ');
for(i=0;i<myTags.length;i++) {
newTag = document.createElement("span");
newTag.setAttribute("id", "tagId_" + i);
newTag.setAttribute("title", myTags[i]);
newTag.setAttribute("innerText", myTags[i]);
if ((i % 2)==0) {
newTag.style.backgroundColor='#eee999';
}
else
{
newTag.style.backgroundColor='#ccceee';
}
divTextBox.appendChild(newTag);
newTag.onclick = function(){tagClickedHandler(this);}
newSpace = document.createElement("span");
newSpace.setAttribute("id", "spId_" + i);
newSpace.setAttribute("innerText", " ");
divTextBox.appendChild(newSpace);
newSpace.onclick = function(){spaceClickedHandler(this);}
}
}
function tagClickedHandler(tag)
{
alert('You clicked a tag:' + tag.title);
}
function spaceClickedHandler(spacer)
{
alert('You clicked a spacer');
}
window.onload=init;
</script>
</head>
<body>
<div id="txtBoxDivContainer">
Enter tags below (Click and Type):<div id="txtBoxDiv" style="border: solid 1px #cccccc; height:20px;width:400px;" onclick="focusHiddenInput();"></div>
<input id="txtHidden" style="width:0px;" type="text">
</div>
</body>
</html>
Cursor
You could CSS the cursor using blink (check support) or otherwise just advance and hide as necessary an animated gif.
This is quite interesting. The short answer to your question is no. Not with the basic input element.
The real answer is: Maybe with some trickery with javascript.
Apparently Facebook does something close to this. When you write a new message to multiple persons in Facebook, you can type their names this sort of way. Each recognized new name is added a bit like an tag here and has an small cross next to it for removing it.
What they seem to do, is fake the input area size by drawing an input-looking box and removing all styling from the actual input with css. Then they have plenty of logic done with javascript so that if you have added an friend as a tag and start backspacing, it will remove the whole friends name at once. etc.
So, yes, it's doable, but takes plenty of effort and adds accessibility problems.
You can look how they do that at scripts like TinyMCE, which add such features to textareas. In textareas you can use HTML to colorize text.
You can use multiple textboxes
textbox1 <space> textbox2 <space> textbox3 ....
and so on... You can then apply the background-color style to each textbox.