I have a input box which looks like below,
<input id="basic-search" type="text" value="Enter keyword or phrase" title="basic-search" class="form-text" size="38" onclick = "this.className = 'focused'; javascript:Reset();" onblur = "javascript:Reset();" />
and css for .focused and form-text is,
.focused {
color:black;
}
.form-text
{
background-color: #FFF;
color: #CCC;
}
The input box on load has the content 'Enter keyword or phrase' which is grey initially. Onclick on this box and on typo the font color changes to black(works good). When the delete the contents, tab to next field or on mouse press the content 'Enter keyword or phrase' changes to black. It should still be grey. What change should i make in the css? any inputs would help. Thanks.
Note: I noticed the 'title' field in stackoverflow works as I would want. I want my boc to work the same way.
Use onfocus instead of onclick. Also, for your onblur, append the css class:
jsFiddle: http://jsfiddle.net/QybRX/14/
<input id="basic-search" type="text" value="Enter keyword or phrase" title="basic-search" class="form-text" size="38" onfocus="this.value=''; this.className = 'focused'; javascript:Reset();" onblur = "basicSearch()" />
<input type="text"/>
<script>
function basicSearch()
{
var element = document.getElementById("basic-search");
if ( element.value.length == 0 )
{
element.value = 'Enter keyword or phrase';
element.className = 'form-text';
}
else
{
element.className = 'focused';
}
javascript:Reset();
}
</script>
What's happening is you are adding the "focused" class to the input field when a user clicks it, but that class is never being removed. You either need to remove the class onblur, or switch to using the :focus selector in CSS, like so:
.form-text
{
background-color: #FFF;
color: #CCC;
}
#basic-search:focus
{
color: black;
}
Are you trying to mimic the HTML5 Placeholder attribute ?
If so you might want to have a look at this article
Related
I've been trying to figure out how I can change the background color of a form element when it is clicked on.
Heres the code:
<form id="form">
<input type="text" placeholder="text"/>
<input type="password" placeholder="more text" />
</form>
<script>
</script>
I'm trying to make it so the form element where it says "text" turns green when clicked, and the form element where it says "more text" turns red when clicked.
I've tried this, which didn't work:
<script>
let form = document.queryselector('input type="text"');
form.addEventListener('click', () => {
form.style.backgroundColor = 'green'
});
</script>
I'm very new to coding, so any help is very much appreciated! Thanks!
you should write ('input[type="text"]');
<script>
let form = document.querySelector('input[type="text"]');
form.addEventListener("click", () => {
form.style.backgroundColor = "green";
});
</script>
If you just want the input background to change color while it's focused. You can achieve this by using CSS selectors. No need for JS
input[type=text]:focus {
background-color: red;
}
Or if you want the form background to change
form:focus-within {
background-color:red;
}
The issue is with this line:
let form = document.queryselector('input type="text"');
First of all - the querySelector() method is camel cased - note the capital S. Secondly, your selector is not quite correct - you're looking for: input[type="text"]:
let form = document.querySelector('input[type="text"]');
form.addEventListener('click', () => {
form.style.backgroundColor = 'green'
});
<form id="form">
<input type="text" placeholder="text"/>
<input type="password" placeholder="more text" />
</form>
Notice though that this doesn't change the background colour back once you focus out - you might be better off adding event listeners for the focusout, focusin and maybe blur events - but better still, you can use CSS:
form input[type="text"]:focus {
background-color: green;
}
I would recommend add and Id or a css class into your input tag then you can use querySelector --> https://www.w3schools.com/jsref/met_document_queryselector.asp
I would like that when the user inserts information in a specific input text, another element becomes visible. My question looks study, but I'm new on JavaScript world, and I have tried searching on Google and here but I wasn't able to find anything.
Check out my code:
.hide {
display: none;
}
<div>
<label>Password:</label>
<input type="password" id="pwInput">
Show password
</div>
What I want is that the "Show password" anchor only shows when the password input has content inside.
Super simple option... use the input event handler on the <input> to toggle a class on it. You can then use an adjacent-sibling selector in your CSS to show or hide the <a>.
.hide {
display: none;
}
.has-input + .hide {
display: inline;
}
<div>
<label>Password:</label>
<input type="password" id="pwInput"
oninput="this.classList.toggle('has-input', this.value.trim())">
Show password
</div>
If you're not a fan of inline event handlers, this is the unobtrusive equivalent
document.getElementById('pwInput').addEventListener('input', function(e) {
this.classList.toggle('has-input', this.value.trim())
}, false)
Note, the force option on classList.toggle() doesn't work in IE. If you need to support it, try something like
this.classList[this.value.trim() ? 'add' : 'remove']('has-input')
Just do this in JavaScript:
document.addEventListener("keydown", function() {
if (document.getElementById("pwInput").value != "") {
document.querySelector(".hide").style.display = "inline";
}
else {
document.querySelector(".hide").style.display = "none";
}
});
.hide {
display: none;
}
<div>
<label>Password:</label>
<input type="password" id="pwInput">
Show password
</div>
This will check every keydown if the input has any content, plus it'll work both ways e.g. if the user deletes the password then the anchor will go away.
I have an input field where I would like to have the characters turn red after the 10th symbol.
So far I have:
var street_1 = document.getElementById('street_1');
street_1.style.color = "red";
Which changes the color of all the characters. Then I tried using:
street_1.value.substring(10,100).style.color = "red";
which of course didn't work since .style as I learned only works for the entire field and not just the value.
Since im completely new to JS I really have no idea how to approach this.
You can hide the input field, and add another span element that displays its value as follows:
HTML:
<div>
<input type="text">
<span class="text"></span>
</div>
CSS:
input {
opacity: 0;
width: 100%;
}
div {
position: relative;
border: 1px solid #000;
}
.text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.red {
color: red;
}
JS:
var span = document.querySelector('span');
var input = document.querySelector('input');
input.addEventListener('keydown', function(evt) {
var value = evt.target.value;
span.innerHTML = value.substring(0, 10) + '<span class="red">' + value.substring(10) + '</span>'
});
You can find a working fiddle here https://jsfiddle.net/v127c14p/
in html you can't define sub elements in the value of input fields because it is allways a simple string and not a html element. so you only can define the color for the input element and the complete text.
<input type="text" value="my <em style='color: red;'>test</em>"> is not possible
<input type="text" value="my test" style="color: red;"> is the only way to mark the text
what can be a sollution, define a simple div tag, write the value of your input filed inside that, and mark the text in that div tag by surrounding with a span tag and setting a class to this
Edit:
best practice is, simply show a red border on the input field and tell the user with a popup what exactly is wrong with his input (bootstrap modals or jquery-confirm.js for excample)
Note: If I explicitly need an <input> field and not just user-editable text, this solution won't work!
It is a quite old question, but maybe someone finds this solution helpful.
It uses the contenteditable tag, to allow the user to type / change text in an normal HTML element and JS to check and color the text.
The field check can, for example, also be done with "onkeyup" for immediate feedback to the user, but this will also reset the text cursor to the beginning of the field.
HTML:
<a id="sample_id" onblur="color_overlength_func('sample_id', 20)" contenteditable="true">Some Text</a>
JS:
function color_overlength_func(textfield_id, max_length) {
let text_temp = document.getElementById(textfield_id).innerHTML;
if (text_temp.length >= max_length) {
let text_OK = text_temp.substr(0, max_length);
let text_to_long = text_temp.substr(max_length);
document.getElementById(textfield_id).innerHTML = "" + text_OK + "<em style='color:red;'>" + text_to_long + "</em>";
}
}
You can find a working fiddle here: https://jsfiddle.net/kyh9803c/
You can do a substring and append a element like span and then target the span with css or js directly.
You can use CSS. Although javascript library need to load everytime
you mean something like this
<div>
HELL<span class="red" style="color:red">O</span>
</div>
You can see in the picture of the two text input boxes (Firefox 52)
That the top one is the default appearance and the lower one has
changed after:
document.getElementById("answerBox").style.background = "white";
Do I have to recreate the element in order to get the default appearance back
or there an easier way?
Thanks for any help,
Gerard
I'm not sure to fully understand your question, but to restore a default appearance you can do something like this :
var btn = document.getElementById('btn');
var input = document.getElementById('input');
btn.addEventListener('click', function() {
input.classList.toggle('border');
});
input.border {
border: 1px solid red;
}
<label>Your answer</label>
<input id="input" type="text" />
<button id="btn">Click me</button>
The "classList.toggle('border')" add the border class to the input classList if not exists, and delete it if already exists.
My jQuery function looks like that
$('input[type="text"]').focus(function() {
$("label").css("border-bottom-color", "red");
});
$('input[type="text"]').blur(function() {
$("label").css("border-bottom-color", "#e6e6e6");
});
1) I have a bunch of text inputs in my form. What I want to do is to change bottom border color of focused text boxes label (there is one label for every text box. And I want to change only focused text boxes label's border color). But my functions changes all labels' border colors at once. How to fix that problem?
2) I have 2 forms. with id's form1 and form2. I want to do same things to second form but color will be another. How to modify this func?
My forms are looking like that
<form id="form1">
...
<label for="fname">First Name</label>
<input name="fname" placeholder="please enter your first name" type="text" />
...
</form>
<form id="form2">
...
<label for="job">Your Job</label>
...
<input name="job" placeholder="please enter your job" type="text" />
</form>
How about this fiddle?
http://jsfiddle.net/RvYca/3/
label tag's for attribute references to an input's id attribute, not its name.
I moved the styles to css too.
Use both CSS and JavaScript:
$('input:text, input:password, textarea').focus(
function(){
$(this).prev('label').addClass('focused');
}).blur(
function(){
$(this).prev('label').removeClass('focused');
});
And, in the CSS:
#form1 label.focused {
border-bottom: 1px solid red;
}
#form2 label.focused {
border-bottom: 1px solid green;
}
JS Fiddle demo.
For question 1, use $(this) as your selector:
$('input[type="text"]').focus(function() {
$(this).css("border-bottom-color", "red");
});
$('input[type="text"]').blur(function() {
$(this).css("border-bottom-color", "#e6e6e6");
});
For question 2, do you mean, after the user has selected both items, in either order? They can't both be in focus at the same time.
your selector is not specific enough for manipulating the css. You must be specific about which label you want to update. Something like this:
$('input[type="text"],textarea,input[type="password"]').focus(function() {
$("label[for='" + $(this).attr('id') + "']").css("border-bottom-color", "red");
});