I'm learning some Javascript, which I'm incorporating into another project. I have some input fields with maxlength set at 20. They currently have a border set to them via CSS:
.textInput:focus {
border: 2px solid green;
}
I'd like for the border of the input fields to go red when the user hits the maxlength limit - this part I've achieved:
$("#newsTitle").keypress(function() {
if($(this).val().length == 20) {
document.getElementById('newsTitle').style.borderColor = "red";
}
});
However, if the user is to delete some text, or backspace, I'd like the border to go BACK to green. Could someone give me some pointers on how to do this?
If theres a more efficient way to achieve what I have so far, do tell me. I feel my approach is a bit bulky and that theres no need to give the element ID twice if its within an if statement, which applies to the element ID in question.
Cheers,
Jack
I would actually do it like this:
$(function() {
$("#newsTitle").keydown(function() {
$(this).toggleClass('invalid', $(this).val().length >= 20);
});
});
.textInput:focus {
border: 2px solid green;
}
.textInput.invalid,
.textInput.invalid:focus {
border: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="textInput" id="newsTitle">
$("#newsTitle").keypress(function() {
if($(this).val().length == 20) {
$(this)[0].style.borderColor = "red";
} else {
$(this)[0].style.borderColor = "green";
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id="newsTitle">
You can try this code
$("#newsTitle").keypress(function() {
if($(this).val().length >= 20) {
$(this).removeClass("valid");
$(this).addClass("invalid");
} else {
$(this).addClass("valid");
$(this).removeClass("invalid");
}
});
.invalid {
border: 2px solid red;
}
.valid {
border: 2px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id="newsTitle">
Related
I am trying to make the border color of the input element turn red only when the value of the input is zero. Here is my code:
const custom = () => {
if(individual.value <= 1) {
error.style.display = 'block'
individual.style.borderColor = 'red'
} else if(individual.value >= 1) {
error.style.display = 'none'
individual.style.borderColor = 'hsl(172, 67%, 45%)'
}
}
First you need an EventListener to listen to an input change: inputElement.addEventListener
Than you need to get the value of the input as an Integer: +inputElement.value
After that you need an if/else-statement or an conditional ternary operator
Use classList to apply changesby adding/removing a class:
let ele = document.querySelector('input');
ele.addEventListener('change', function() {
let val = +ele.value;
if (val <= 1) {
ele.classList.add('error');
} else {
ele.classList.remove('error');
}
})
.error {
border: 1px solid red;
}
<input type="number step="1"">
I have created two input fields, both of type number. I created a general purpose handler, handleNumberInput(e) to listen for input events.
In the handler, you can compare the value of the input field to 0 using valueAsNumber. You say in your question that you only want the border to turn red when the value of the input is zero, but your code is testing for something else.
Add or remove the error class with classList.add() or classList.remove().
To turn the outline red when there is an error, you need to set the outline-color style to red otherwise the default focus setting of this will override any border color you have applied.
You can see this color effect on the balance input field, which shows a black outline when the balance is 0 instead of red, but the background is pink to show that the error class is being applied.
const temperatureElement = document.getElementById('temperature');
const balanceElement = document.getElementById('balance');
temperatureElement.addEventListener('input', handleNumberInput);
balanceElement.addEventListener('input', handleNumberInput);
function handleNumberInput(e) {
if (e.target.valueAsNumber === 0) {
e.target.classList.add("error");
} else {
e.target.classList.remove("error");
}
}
.temperature.error {
outline-color: red;
/* background-color: pink; */
border: solid 2px red;
border-radius: 2px;
color: red;
}
.balance.error {
/* outline-color: red; */
background-color: pink;
border: solid 2px red;
border-radius: 2px;
color: red;
}
<label for="temperature">Temperature</label>
<input id="temperature" class="temperature" type="number" step="1" value="1">
<br/>
<br/>
<label for="balance">Balance</label>
<input id="balance" class="balance" type="number" step="1" value="1">
I want to apply 4 effects on an element:
On hovering over the element.
On hovering away from the element.
On focusing on the element.
On blur.
But there is a conflict happens , When I focus on the element the hover in and out runs , and when I click outside the element the effect that should happens on blur doesn't happen , I think it's because of the hover out.
var el = $('input');
el.focus(function() {
el.css('border', '1px solid green');
});
el.hover(function() {
el.css('border', '1px solid green');
}, function() {
el.css('border', '1px solid grey');
});
el.blur(function() {
if (el.val == '') {
el.css('border', '1px solid red');
} else {
el.css('border', '1px solid grey');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type='text' />
On hovering in the border color turns green , on hovering out it turns grey.
But on focusing on the input the color is grey not green, and in blur it's grey too not red.
The issue is due to the logic in your if condition. el.val returns the reference of the function, which will never equate to an empty string. You need to use el.val() instead to get the actual value of the control:
var el = $('input');
el.focus(function() {
el.css('border', '1px solid green');
});
el.hover(function() {
el.css('border', '1px solid green');
}, function() {
el.css('border', '1px solid grey');
});
el.blur(function() {
if (el.val() == '') {
el.css('border', '1px solid red');
} else {
el.css('border', '1px solid grey');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type='text' />
That being said I would suggest combining CSS rules with this where possible, and definitely using classes over joining the styling rules with the JS code so tightly. Something like this:
var el = $('input');
el.blur(function() {
$(this).toggleClass('empty', $(this).val().trim() === '');
});
input {
outline: 0;
border: 2px solid grey;
}
input:hover,
input:focus {
border: 2px solid green;
}
input.empty {
border: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type='text' />
I'm trying to work on a webpage that allows users to write their own notes for a school project, and my idea was to let them bold/italicize/underline their text using buttons. As of now, the buttons are working, but they bold/italicize/underline everything inside the text area. Instead, I want it to work in such a way that only the text they highlight gets bold/italicized/underlined.
I'd also like to know how to make it so that when they click the bold button, text that they type from then onwards will come out bold, and when they click it again, the text that is typed from then onwards will come out normal.
<script type="text/javascript">
function boldText(){
var target = document.getElementById("TextArea");
if( target.style.fontWeight == "bolder" ) {
target.style.fontWeight = "normal";
} else {
target.style.fontWeight = "bolder";
}
}
function italicText(){
var target = document.getElementById("TextArea");
if( target.style.fontStyle == "italic" ) {
target.style.fontStyle = "normal";
} else {
target.style.fontStyle = "italic";
}
}
function underlineText(){
var target = document.getElementById("TextArea");
if( target.style.textDecoration == "underline" ) {
target.style.textDecoration = "none";
} else {
target.style.textDecoration = "underline";
}
}
</script>
You can use execCommand(). This API was meant for developing text editors. The 3 buttons utilize the very versatile execCommand() and the writing element is a plain div enabled with the attribute contenteditable.
SNIPPET
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style>
:root {
font: 400 2ch/1.25 Consolas;
}
body {
font-size: 2ch
}
#editor {
height: 100px;
width: 375px;
margin: 10px auto 0;
}
fieldset {
margin: 2px auto 15px;
width: 375px;
}
button {
width: 5ex;
text-align: center;
padding: 1px 3px;
}
</style>
</head>
<body>
<fieldset id="editor" contenteditable="true">
The quick brown fox jumped over the lazy dog.
</fieldset>
<fieldset>
<button class="fontStyle" onclick="document.execCommand('italic',false,null);" title="Italicize Highlighted Text"><i>I</i>
</button>
<button class="fontStyle" onclick="document.execCommand( 'bold',false,null);" title="Bold Highlighted Text"><b>B</b>
</button>
<button class="fontStyle" onclick="document.execCommand( 'underline',false,null);" title='Underline Highlighted Text'><u>U</u>
</button>
</fieldset>
</body>
</html>
Textarea does not allow such things. I would suggest you to use something like ckeditor. It will do the job for you neatly. But if you still want to do it yourself, you need to use a div with contenteditable tag.
Good Luck !
With textarea you cannot achieve that, use divs instead, so you can do something like this:
$(document).ready(function(){
$('.boldText').click(function(){
$('.container').toggleClass("bold");
});
$('.italicText').click(function(){
$('.container').toggleClass("italic");
});
$('.underlineText').click(function(){
$('.container').toggleClass("underline");
});
});
div.container {
width: 300px;
height: 100px;
border: 1px solid #ccc;
padding: 5px;
}
.bold{
font-weight:bold;
}
.italic{
font-style :italic;
}
.underline{
text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container" contentEditable></div><br/>
<input type="button" class="boldText" value="Bold">
<input type="button" class="italicText" value="Italic">
<input type="button" class="underlineText" value="Underline">
I set up a button to change the color. It is showing classA but it will not change to classB onclick. The button seems to be working so I am not sure what is not working here. I would appreciate any help. Here is the code.
'<script>
function toggleclass() {
var myElement = document.getElementById("id1");
if(myElement.className == "classA") {
myElement.className = "classB";
} else {
myElement.className="classA";
}
}
window.onload=function() {
document.getElementById("btn1").onclick =toggleClass;
}
</script>'
HTML
'<td><div id="id1" class="classA"><img src="images/this.png" width="300" height="300"
alt="ttemp"></div>
<input type="button" id="btn1" value="ChangeColor" />
</td>'
CSS
'.classA {
width: 300px;
border: 2px solid black;
background-color: green;
color: red;
padding: 3px;
}
.classB {
width: 300px;
border: 2px solid black;
background-color: blue;
color: red;
padding: 3px;
}'
Thanks for your help,
Frank
Bro, do you even jQuery? http://api.jquery.com/click/
$('#btn1').click(function(){
$('#id1').toggleClass('classB');
});
Personally I would do the following:
$('#btn1').on("click", function(e){
e.preventDefault();
$('#id1').toggleClass("classB");
});
The prevent code should stop the page from jumping but still preform the action whilst toggling the class
Just my 2 cents
I have a text box in my aspx page. I need show its tooltip when and only when the text box is disabled/greyed out. How do I achieve this using JavaScript?
You can call this function where you enable/disable the textbox
function setToolTip()
{
if(document.getElementById("myTextBox").disabled == true)
{
document.getElementById("myTextBox").title="ToolTip";
}
else
{
document.getElementById("myTextBox").title="";
}
}
Here is one way:
document.getElementById("<%=TextBox.ClientID%>").setAttribute('title','New Tooltip');
2nd way:
function DisplayToolTip()
{
document.getElementById('divToolTip').style.left = window.event.x;
document.getElementById('divToolTip').style.top = window.event.y;
document.getElementById('divToolTip').style.visibility = 'visible';
}
function HideToolTip()
{
document.getElementById('divToolTip').style.visibility = 'hidden';
}
Now add the below HTML markup code:
<span id="spanName" style="font-weight: bold;border: solid 2px red;"
onmouseover="javascript:DisplayToolTip();"
onmouseout="javascript:HideToolTip();">THIS IS THE SPAN
</span>
<div id="divToolTip" style="position: absolute; visibility: hidden;
z-index: 20; background-color: white; border: solid 1px Blue;">
This is ToolTip Text
</div>