I have a form with an input with the attribute required set. When i submit the form and the input is empty, it shows a red border around it.
I am now looking for a javascript method to remove this, and reset the display of the input to the initial state.
After resetting and submitting again, the input should be checked again and show a red border if empty. Therefore i think setting css with :required does not give the desired solution.
A quick fiddle to illustrate my question:
jQuery(function() {
jQuery('#reset').click(function() {
//Clear red border of input
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
<input id="myinput" required>
<input type="submit" value="submit">
</form>
<button id="reset">reset</button>
After clicking reset, the form should be shown as when the page is just loaded.
Edit
I tested this in firefox. In chrome the style automatically is removed when the element is onfocussed. However, i am still looking for a js solution to remove the message.
Edit, Updated
I want to reset the style, not prevent it from happening (when i dont
focus on it).
You can add a className to #myinput element which sets box-shadow to none and border to inherit at click on #reset element. Remove className at focus or change event on #myinput element, depedning on whether you want the box-shadow and border removed at focus on invalid input, or when user inputs a value.
.reset:-moz-ui-invalid:not(output) {
box-shadow: none;
border: 1px solid inherit;
}
When submitted, it shows a message like "This field is required". This
is removed when i unfocuss, but i am looking for a js method to remove
that message.
You can use invalid event, .setCustomValidity(" ") with a space character as parameter, called on event.target within handler.
You can use css :focus, :invalid to set border to red only when input gains focus and input is invalid. At html can add pattern attribute with RegExp \w+ to set input to invalid if value of input is empty string or only space characters
jQuery(document).ready(function() {
jQuery("#reset").click(function() {
jQuery("#myinput").addClass("reset")
});
jQuery("#myinput").focus(function() {
jQuery(this).removeClass("reset")
})
.on("invalid", function(e) {
e.target.setCustomValidity(" ");
})
})
#myinput:focus:invalid {
border: 1px solid red;
}
#myinput:focus {
outline: none;
}
.reset:-moz-ui-invalid:not(output) {
box-shadow: none;
border: 1px solid inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
<input id="myinput" pattern="\w+" type="text" value="" required/>
<input type="submit" value="submit" />
</form>
<button id="reset">reset</button>
I cannot reproduce it here. But probably your problem is the pseudo-class applied to the input.
Given that you cannot remove pseudo-classes, maybe you can override the style. Something like:
:invalid {
box-shadow: none;
}
:-moz-submit-invalid {
box-shadow: none;
}
:-moz-ui-invalid {
box-shadow:none;
}
If you just need to apply the style when the reset button is clicked, add the styles to your own class and add/remove the class when needed.
The initial keyword makes a CSS property take the browser's default style, if this is what you're looking for...
jQuery(function() {
jQuery('#reset').click(function() {
//Clear red border of input
jQuery('#myinput').css('border-color', 'initial');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
#myinput {
border-color: red;
}
</style>
<form id="myform">
<input id="myinput" required>
<input type="submit" value="submit">
</form>
<button id="reset">reset</button>
Related
Sorry for the really basic/simple question, I'm very new to front end web development.
I've looked at lots of the questions about using Javascript to show/hide things on a web page but none of them talk about specifically showing/hiding a text input border.
On my page I have a text input and a button.
When the page loads I don't want the text input border to be visible.
When the button is clicked I want it to change the state of the text input border (IE: if the text input border is not showing when the button is clicked then it calls a javascript function to make the text input border visible. If the text input border is visible then the javascript function the button calls would make the text input border invisible.)
Here is my code so far:
<html>
<head>
<title>Text Input Border test</title>
</head>
<body>
<br>
<input type="text" id="address1" value="test text input" class="question-text" size=30>
<br>
<input type="button" value="Click me" onclick="showBorder()">
</body>
<script type="text/javascript">
function showBorder () {
var myInput = document.getElementById("address1").style;
myInput.borderStyle="solid";
}
</script>
<style scoped lang="scss">
.question-text {
border: 0;
}
</style>
</html>
When the button is clicked there are no visible changes to the text input border or the page in general for that matter.
Any direction would be much appreciated, I'll be sure to upvote any help and mark the most applicable answer as accepted. Thanks in advance.
try this:
<html>
<head>
<title>Text Input Border test</title>
</head>
<body>
<br>
<input type="text" id="address1" value="test text input" class="question-text" size=30>
<br>
<input type="button" value="Click me" onclick="toggleBorder()">
</body>
<script type="text/javascript">
function toggleBorder () {
var myInput = document.getElementById("address1");
myInput.classList.toggle('question-text-border');
}
</script>
<style scoped lang="scss">
.question-text {
border: 0;
}
.question-text-border {
border: 1px solid black;
}
</style>
</html>
classList is basically an array with a few special functions: Class List Docs
calling toggle on class list removes the class if present and adds it if absent
The bottom css class .question-text-border overrides the class .question-text
Let me know if there is anything I need to clarify.
Border requires three parts. The size, defined in almost anything, i.e. 2px, the type of line, such as dotted or solid, and the color, such as mediumspringgreen (the best green). So, in order to properly use the border property, you need to set the border in JavaScript by using the three afore mentioned properties. Instead of myInput.borderStyle="solid";, you should use myInput.borderStyle="1px solid crimson";, or whichever other values you wish to use.
You need to give it a size also..
Just add this..
myInput.borderStyle="solid";
myInput.borderWidth= '1px'
You need to set your style border none, check for a border of null, and the use .style.border to set the border to the border you want:
//
var myInput = document.getElementById("address1");
//
function showBorder() {
if (myInput.style.border == "") {
myInput.style.border = "1px solid black";
} else {
myInput.style.border = "";
}
}
.question-text {
border: none;
}
<input type="text" id="address1" value="test text input" class="question-text" size=30>
<br>
<input type="button" value="Click me" onclick="showBorder()">
It's such an unnecessary detour to always style reset an input element when you only want the event functionality.
Is there any HTML element that offers events and as well allows me to styling-wise "start from scratch"?
DIV elements are not form elements.
There is no value or name attribute or property on a DIV element.
The easiest solution is to use an input element and remove all the default styling with CSS:
console.log(document.getElementById('div1').name); // undefined
console.log(document.getElementById('div1').value); // undefined
input {
border: none;
padding: none;
background-color: transparent;
outline: none;
}
<input type="text" value="Some text">
<div id="div1" name="name1" value="value1"> div content</div>
I have been scratching my head since yesterday on this problem, which I cannot solve. I am a new starter to Twitter Bootstrap and everything was going well until yesterday.
I am using the latest JQuery v1.11.1 and Twitter Bootstrap v3.3.1. Yesterday I downloaded Bootstrap Tags Input, from here: http://timschlechter.github.io/bootstrap-tagsinput/examples/
The plugin works and I have changed the CSS styles to match my page layout but the problem I am having is that the placeholder attribute will not disappear when on focus. If I type in a tag and add a comma value the placeholder will show until I start typing and then it will disappear again.
I have tried using JQuery onfocus function to remove the attribute when onfocus but it doesn't do anything. What I want to achieve is that when onfocus the placeholder does not show at that point not even on blur.
My input field is demonstrated below:
<input type="text" name="customer_tags" id="customer_tags" value="" placeholder="Enter you tags" data-role="tagsinput" required />
two years later, but i found how to work around this issue. First, if you inspect the DOM , you will see a new input text, which inherits our placeholder text, but without the extra function onblur, onfocus that everybody mention before.
<div class="bootstrap-tagsinput">
<input placeholder="text inherited from our input" size="23" type="text">
</div>
Then, to fix this issue, you had to create a jquery function to point that input. Like this:
$('.bootstrap-tagsinput input').blur(function(){jQuery(this).attr('placeholder', '')})
pointing to element with the class "bootstrap-tagsinput" and then the "input" objects inside. You can add a .focus function too if you prefered. In my case, works when the user leave the object and the input tags look clean without placeholder.
HTML5 placeholder attribute will not disappear when you focus in the input tag... it will only disappear when you start typing. It is the default behavior.
You can see it # W3Schools as well...
Following code works in my case:
<input type="text" name="add_image_tags" id="add_image_tags" data-role="tagsinput"
class="form-control" placeholder="Enter tags" data-placeholder="Enter tags" value="" />
handlePlaceHolder(); //Call during page load
function handlePlaceHolder()
{
if($('#add_image_tags').val())
{
$('.bootstrap-tagsinput input').attr('placeholder', '');
}
else
{
$('.bootstrap-tagsinput input').attr('placeholder',$('#add_image_tags').attr('data-placeholder'));
}
}
$('#add_image_tags').on('itemRemoved', function(event) {
// event.item: contains the item
handlePlaceHolder();
});
$('#add_image_tags').on('itemAdded', function(event) {
// event.item: contains the item
handlePlaceHolder();
});
Try this, i hope it's working:
<form>
<div>
<label for="name" class="left-label">Your Name</label>
<input type="text" class="example-two" placeholder="Enter you tags" id="name" name="name">
</div>
</form>
CSS:
[placeholder]:focus::-webkit-input-placeholder {
transition: opacity 0.5s 0.5s ease;
opacity: 0;
}
.example-two:focus::-webkit-input-placeholder {
transition: text-indent 0.5s 0.5s ease;
text-indent: -100%;
opacity: 1;
}
body {
}
form {
display: inline-block;
margin-top: 20px;
}
label {
display: block;
text-align: left;
font: bold 0.8em Sans-Serif;
text-transform: uppercase;
}
.left-label {
float: left;
padding: 8px 5px 0 0;
}
input[type=text] {
padding: 5px;
text-indent: 0;
}
form div {
margin: 20px;
clear: both;
text-align: left;
}
JSFiddle
EDIT:
Working on IE too:
JSFiddle
That's how the plugin behaves. As soon as you hit "enter" or "comma" it creates a span tag (see image attached)and shift the input to the right. So now the input has no value and should show the placeholder.
In their docs it's mentioned [Search for confirmKeys]
Array of keycodes which will add a tag when typing in the input.
(default: [13, 188], which are ENTER and comma)
Change the confirmkeys to remove creation of tags when you type comma
Edit:
On your site I tried the below method in console and it worked.
$('input').tagsinput({
confirmKeys: [13]
});
I was able to do a quick fix using jquery. The behavior I wanted should do two things:
1) Remove placeholder while on page after I've focused and started typing. So I will run it on keyup.
$(document).on('keyup', '.bootstrap-tagsinput input', function(){
$(this).attr('placeholder', '')
})
2) If there are already labels in an input, then I don't obviously need a placeholder. I run this on page load.
$('.labels').each(function(){
var len = $(this).tagsinput('items');
if(len){
var $input = $($(this).prev().children('input').get(0));
$input.attr('placeholder', '');
}
})
In my case, after a little modification, it works fine.
$('#txtTimeSlot').on('change', function () {
var len = $(this).tagsinput('items').length;
if (len > 0) {
var $input = $($(this).prev().children('input').get(0));
$input.attr('placeholder', '');
} else {
var $input = $($(this).prev().children('input').get(0));
$input.attr('placeholder', $(this).attr('placeholder'));
}
});
for all who are still having this problem, just change the line in the javascript file:
from:
cancelConfirmKeysOnEmpty: true,
to
cancelConfirmKeysOnEmpty: false,
And thats all!
I wish there was a CSS selector that could do this, because I'm a complete noob when it comes to javascript.
The HTML is basically this:
<div class="searchmenu">
<form id="search">
<fieldset>
<input type="text" class="inputbox search"/>
</fieldset>
</form>
</div>
The CSS is this:
.searchmenu form {
display:none;
}
searchmenu:hover form {
display:block;
}
The form is already displayed when the div is hovered, now I also want it to keep it displayed while the input text is on focus.
I tried searching for other cases, but they either don't work for my case or I don't know how to implement them D:
DEMO
You can use jQuery focus & blur event.
Like this:
$('.inputbox').focus(function(){
$('.searchmenu').addClass('is_focused');
});
$('.inputbox').blur(function(){
$('.searchmenu').removeClass('is_focused');
});
CSS:
.searchmenu form {
display:none;
}
.searchmenu:hover form,
.searchmenu.is_focused form{
display:block;
}
.searchmenu{
background: #eee;
padding: 10px;
}
bind the input field to jquery event
For example
$(".inputbox .search").bind("focus keyup",function(){
$(".searchmenu").css("display","block");
});
I hope this would be helpful to you
I got several buttons created in a loop dynamically.
<input class="btn btn-info attribute-button" name="commit" type="button" value="first_name">
And i got a text field.
<textarea class="text optional special form-control" data-role="tagsinput" id="campaign_message" maxlength="180" name="campaign[message]"></textarea>
these are created by my rails application.
and this is my js code to add the value of the button into the text field
$(document).on("click",".attribute-button", function(){
var value = $('.special').val($('.special').val() + $(this).val());})
what i want to do is this;
when a button is pressed i can already write the content on the text are but what i want is to write them as non-editable texts.User shouldn't be able to modify the added text.
http://timschlechter.github.io/bootstrap-tagsinput/examples/bootstrap-2.3.2.html
i found this lib but it didn't work out for me since it doesn't support a text are.He apply tags to all inputs.But i will have tags and input texts together.
how can i achieve this?
take a look at the awnser of this question. All you have to do is make the field readonly if you do not want people to add text.
Make textarea readonly with jquery
You can do this with a button click event
Here is my solution. There is a div with the class of tags. Inside it are divs with the class of tag and a text field with the class of newtag. When you enter text into newtag and hit space, enter or tab, a new tag div will be inserted. If you click a button with the class of attribute-button, its value will be added to a tag div. You will need to add thing to complete it such as a delete button on the tags to remove it.
Fiddle
HTML:
<input class="btn btn-info attribute-button" name="commit" type="button" value="first_name" />
<div class="tags">
<input type="text" name="newtag" class="newtag" placeholder="Add tags" />
</div>
JS:
$(".tags, .attribute-button").click(function(){
$(".newtag").focus();
})
$(".newtag").keydown(function(e){
if(e.which === 13 || e.which === 32 || e.which === 9){
e.preventDefault();
$(".newtag").before("<div class='tag'>"+$(".newtag").val()+"</div>");
$(".newtag").val("");
}
});
$(".attribute-button").click(function(){
$(".newtag").before("<div class='tag'>"+$(this).val()+"</div>");
})
CSS (optional):
.tags{
width: 400px;
height: 100px;
border: 1px solid #000;
margin: 5px;
}
.tag{
padding: 1px;
background-color: blue;
color: #fff;
border-radius: 3px;
display: inline-block;
}
.newtag{
border: none;
outline: none !important;
}