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.
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
everyone, I am not familiar with javascript.
I would like to ask you a question! I have a message block. The default block height is to retain the input height of 1 row. The height of the textarea will increase as more text is input. the maximum height is 3 row, I currently write directly textarea above
oninput = "this.style.height = '';
this.style.height = Math.min (this.scrollHeight -3, 67) + 'px'"
is It can be achieved, but the question arises how to restore the height to the original height of 1 row after pressing send?
.demo{
resize:none;
max-height:120px;
}
<div id="app">
<textarea oninput="this.style.height='';
this.style.height = Math.min(this.scrollHeight -3 ,67)+'px'" class="demo">
</textarea>
<br>
<input type="button" value="SEND">
</div>
I got your question that you want to restore the height of the Text area.
The answer is simple, you can set the height of the text area by assigning the number of rows.
Note : This does not affect the function abilities of the textarea. It just affect the height of the textarea.
To do that check out my solution,
$(document).ready(function(){
$("#btnDefault").click(function(){
$('#Sometext').attr('rows', 2);
});
$('#Sometext').keyup(function(){
$('#Sometext').attr('rows', 10);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btnDefault">
Set to defaults
</button>
<textarea id="Sometext" rows="10">
</textarea>
To achieve this
I set the rows attribute to the textarea in the html tag.
wrote the button click event in which I am resetting the number of rows of the
text area.
Further ahead you can clear the text area after click if you want to by,
$('#Sometext').val('');
If you find it useful please let me know, feel free to comment on the answer!
What should be done with the input of the textarea on click send button?
If you only want to set the textarea height to the first state (as your css says max-height:120px;) you can remove the height of the textarea via jquery:
jQuery('input').on("click", function(){
jQuery('textarea').css('height','');
})
But I think you want to remove the content of the textarea on click!?
jQuery('input').on("click", function(){
jQuery('textarea').html('').css('height','');
})
https://jsfiddle.net/rince1984/ad8u23b5/3/
When the button is clicked, just unset your textarea height like this:
const txtarea = document.querySelector('.demo');
const submitBtn = document.querySelector('.someBtn');
txtarea.addEventListener('input', () => {
txtarea.style.height = Math.min(txtarea.scrollHeight -3, 67) + 'px';
});
submitBtn.addEventListener('click', () => {
txtarea.value = ''; // remove this line if you already have code that resets your field
txtarea.style.height = 'unset';
});
.demo{
resize:none;
max-height:120px;
}
<div id="app">
<textarea class="demo">
</textarea>
<br>
<input class="someBtn" type="button" value="SEND">
</div>
I am trying to change the alignment of textbox dynamically and it is not working. But if I give through on load of widget that is working fine.
code; HTML
<input type="text" id="text1" style="text-align:center;width:80px" value="abc">
<input type='button' id="btn" value="click">
JavaScript:
document.getElementById('btn').onclick = function(){
console.log(document.getElementById('text1').style.textAlign);
document.getElementById('text1').style['text-align'] = "left";
}
You can fix this bug by using the ::-ms-value pseudo element. You need to add some padding so it triggers a repaint. As it is the pseudo element rather than the actual element you are adding padding too, it looks like it doesn't change the actual width of the input. It also has the advantage of not being applied to non-IE browsers.
CSS:
.update::-ms-value {
padding-right: 1px;
}
JS:
document.getElementById('text1').className += "update";
http://jsfiddle.net/yHnLK/22/
Of course, you’d want to store the text1 element in a variable so you don't keep calling getElementById each time. Adding the text-align: left; via CSS would also be better, rather than adjusting the style object directly.
Try this code. Hope it help you with a good solution.
I set width to zero value then using timer to set width to the previous value to make it rendering again.
HTML:
<div>
<textarea name="text">WANDER LUST</textarea>
</div>
<div>
<button class="btn-text-align" data-rule="textAlign" data-value="left">Left</button>
<button class="btn-text-align" data-rule="textAlign" data-value="center">Center</button>
<button class="btn-text-align" data-rule="textAlign" data-value="right">Right</button>
</div>
Javascript:
(function($) {
$('.btn-text-align').on('click', function(){
$obj= $(this);
rule= $obj.attr('data-rule');
ruleValue= $obj.attr('data-value');
textElement= $(':input[name="text"]')[0];
textElement.style[rule]= ruleValue;
width= textElement.style['width'];
textElement.style['width']= '0px';
timerElement = setInterval(function () {
textElement.style['width']= width;
clearInterval(timerElement);
}, 10);
})
})(jQuery);
http://jsfiddle.net/zLwq140x/
Try this code, it works in IE:
Javascript:
document.getElementById('btn').onclick = function(){
console.log(document.getElementById('text1').style.textAlign);
document.getElementById('text1').style.textAlign = "left";
}
MDN CSS Properties Reference
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
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");
});