I need to make 'read-only div' using with CSS or JavaScript or Jquery. Not only text-box and all. Full div. That div contain anything(image, ,other div,text-box,...)
That should support by all Browser.
Any idea?
You could use pointer-events: none; to disable mouse DOM interaction (like click, hover, etc) on certain element. Example:
div {
pointer-events: none;
}
<div>
<input type="text" value="value" />
<br />
<textarea>value</textarea>
</div>
However, even though pointer-events: none; is there, it's still possible to make the cursor to be focus on the element (or it's children). Meaning if we move the cursor focus on the <input /> tag, then it's possible to edit the value.
Example: try to click the <input /> tag, then press tab in keyboard, the cursor focus will be on input, making it editable.
To make <input /> tag completely un-editable, put readonly attribute on the tag. Below is simple example to do it by using jQuery .prop(). You can also put the attribute directly on the tag, depending on the needs.
$("input, textarea").prop("readonly", true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="text" value="value" />
<br />
<textarea>value</textarea>
</div>
You can't do this with CSS unfortunately, you're after the readonly attribute on HTML elements. You can pretty easily accomplish what you want using JavaScript, here's an example with jQuery.
jsFiddle
HTML
<div class="readonly">
<input type="text" />
<div><input type="checkbox" /> Blah</div>
<textarea>abc</textarea>
</div>
JavaScript
$(document).ready(function() {
$('.readonly').find('input, textarea, select').attr('readonly', 'readonly');
});
I am afraid, you can't control elements behavior with CSS.
CSS stands for Cascading Style Sheets - it's only for styling elements.
But you can use JavaScript.
Untested jQuery example above:
$('#myDiv').children().attr('readonly', true);
Just Try With The Following :
Script Part :
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#previewDiv :input").attr("disabled", true);
});
</script>
HTML Part :
<div id="previewDiv">
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<input type="text" name="test" value="test">
</div>
I think this may help you to resolve your problem.
$("div").prop("readonly", true);
<div>
<input type="text" value="value" /> <br />
<textarea>value</textarea>
</div>
$('div *').prop('disabled',true);
Related
I tried With fieldset but its disabling only input field and remaining dropdown are not disabled . Is there any solution for my question ??
Problem
What I think you're trying to do is to place a condition on a div, and when that condition is true, you want to disable the div and all child elements.
You can mark a div as disabled using ng-disabled like this:
<div ng-disabled="expression">
<input type="text"> <!-- Won't be disabled! -->
<select> <!-- Also won't be disabled! -->
<option value="1">option 1</option>
</select>
</div>
However, that does not propagate to child elements.
See the doco for ng-disabled here: https://docs.angularjs.org/api/ng/directive/ngDisabled
Solution
You will have to add the ng-disabled attribute to each child element in the div you want disabled.
<div>
<input type="text" ng-disabled="expression">
<select ng-disabled="expression">
<option value="1">option 1</option>
</select>
</div>
Extra
Keeping the ng-disabled attribute on the div is not required to disable the child elements, however it can be used as a useful css selector.
For example, maybe you want to set the opacity for the whole div when it is disabled.
<div class="special-div" ng-disabled="expression">
<input type="text" ng-disabled="expression">
<select ng-disabled="expression">
<option value="1">option 1</option>
</select>
</div>
Using this css
div.special-div[disabled] {
opacity: 0.5;
}
Try this:
document.getElementById("yourDivID").style.pointerEvents = "none";
For Example :
<div id="myDiv">
<h1>This is my division</h1>
</div>
Then code will be as below :
document.getElementById("myDiv").style.pointerEvents = "none";
I have a site containing a forms that is saved using jquery autosave and updated using ajax. This form contains different types of input element like textbox, jquery-ui datepicker and timepicker...
<div id="body">
<form id="line1">
<input id="1" type="text"/>
<input id="2" type="text" class="datepicker"/>
<input id="3" type="text" class="timepicker"/>
<select id="4" multiple="multiple>
<option> 1 </option>
</select>
</form>
<form id="line2">
<input id="1" type="text"/>
<input id="2" type="text" class="datepicker"/>
<input id="3" type="text" class="timepicker"/>
<select id="4" multiple="multiple">
<option> 1 </option>
</select>
</form>
</div>
Now I need to reload the content for body for filtering purposes.
What now can happen is that the content is reloaded and while the forms still accept inputs and try to save it but after reload it "disappears" because it wasn't taken into the new view.
Adding an overlay with pointer-events:none stopped mouse events but typing is still possible.
What I already have tried is:
function disableDiv(event)
{
event.stopimmediatepropagation()
}
...
this.element.find('.body')[0].addEventListener("keydown", disableDiv, true);
Which seam to work for Firefox but not for Chrome or IE
Is there a way to prevent keyboard events to capturing into the forms for every browser?
I'm not sure I totally understand your question. But have you tried making your jQuery set all of your inputs to disabled when the form is submitted? That would accomplish the goal of not letting your inputs be changed after the form is submitted.
For example:
jQuery 1.6+
$("input").prop('disabled', true);
jQuery 1.5 and below
$("input").attr('disabled','disabled');
You could get some ideas from how bootstrap marks inputs disabled, if you're unfamiliar... http://getbootstrap.com/css/.
If you want your inputs to not be able to be edited, the correct way to do it is to disable them. Something like this would do it:
$(function() {
$(".datepicker").datepicker();
$("#disable").click(function() {
$("#body input").prop( "disabled", true );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="body">
<form id="line1">
<input id="1" type="text"/>
<input id="2" type="text" class="datepicker"/>
<input id="3" type="text" class="timepicker"/>
<select id="4" multiple="multiple>
<option> 1 </option>
</select>
</form>
<form id="line2">
<input id="1" type="text"/>
<input id="2" type="text" class="datepicker"/>
<input id="3" type="text" class="timepicker"/>
<select id="4" multiple="multiple">
<option> 1 </option>
</select>
</form>
</div>
<input type="button" value="disable" id="disable"/>
Obviously you can re-enable them once you are done loading whatever it is you are loading.
Trying to prevent the specifics of how you might interact with the control rather than what state you want the control to be in, is doing the wrong way. You don't care if somebody clicks or types, what you care about is that the control can't be edited. For example, you have stopped click and keydown, but what about touch events? Or any other type of event that some browser somewhere might implement for interacting with a control. If you try to disable a control by intercepting only the events that cause the control to do something then there is always the risk that you miss some interaction.
I need to make a spinner, however using <input> only.
I can only use
<input type="text" placeholder="Select Date" class="sel1" />
What can I do, using CSS, to create a simple spinner?
DEMO
You can accomplish this by using the <datalist> tag in HTML5.
Use list attribute in input tag whose value equals to datalist ID
<input type="text" placeholder="Select Date" class="sel1" list="productName"/>
<datalist id="productName">
<option value="Pen">Pen</option>
<option value="Pencil">Pencil</option>
<option value="Paper">Paper</option>
</datalist>
If you double click on the input text in the browser a list with the defined option will appear.
UPDATE:
If you want a spinner as a datepicker just change the type attribute of input from text to date :
<input type="date" placeholder="Select Date" class="sel1" list="productName">
DEMO
my soluton is
input {
-webkit-appearance: menulist;
}
I have a bootstrap v3 inline form:
<div id="searchsection" hidden>
<form id="searchform" class="form-inline" role="form">
<label>Find:</label>
<select id="field" class="form-control">
<optgroup label="Strings">
<option value="authors" selected="selected">Authors</option>
<option value="title">Title</option>
<option value="pub">Publication Name</option>
<option value="keywords">Keywords</option>
<option value="physloc">Physical Location</option>
<option value="comment">Comment</option>
</optgroup>
<optgroup label="Dates">
<option value="datepub">Publication Date</option>
<option value="dateread">Date Read</option>
</optgroup>
</select>
<input type="text" id="narrowon1" class="form-control"/>
<label for="narrowon2" class="form-control"></label>
<input type="text" id="narrowon2" class="form-control" placeholder="YYYYMM" hidden/>
<input type="button" id="narrower" name="narrower" value="Narrow" class="form-control btn btn-primary"/>
<input type="button" id="widener" name="widener" value="Widen" class="form-control btn btn-primary"/>
</form>
</div> <!-- end of searchsection -->
I would like to reduce the width of the boxes narrowon1 and narrowon2 when the optgroup is Dates so that they would only hold six digits each; I am thinking of setting size="6". However, when I simply add those attributes in jQuery via a statement such as
$('#narrowon1').attr('size',"6");
they don't affect the rendered output. I expect the Bootstrap classes are overriding my additions.
What is a "Bootstrap-friendly" way to alter the sizes of these input boxes?
The maxlength attribute will not be affected by any CSS applied to the <input>. How are you applying it in javascript as you can't limit the character length with CSS?
I think you might be mistaking the maxlength attribute with the actual width of the <input>. Here is a some info on the attribute: Maxlength Attribute
View the log and make sure your <input> looks like this:
<input maxlength="6" name="someInput" />
Edit:
Place a class of your own on the input and place new styles on the <input>. Make sure your local CSS file loads after the bootstrap CSS. Than you can easily override it.
If you can't create a new CSS file, try $('input').css('width', '200px'); with jQuery
You'll need to wrap each input field inside a div with the class of col-sm-2
you can change the number with which ever you like.
You can customise Bootstrap styles by overriding them with your own CSS.
See the Customizing section on the Bootstrap website for information on how it's done:
http://getbootstrap.com/getting-started/#customizing
I have a php page with 4 text boxes, each need a "drop down" when the text boxes have the focus. Clicking the options would populate the (editable) text box(es) and close the drop down. The text boxes are of course part of html forms. How can I do this inline with javascript or ajax using minimal code?
Unless you are calling a webserver ajax is useless here.
You will need to have or create a div, since it is below your input box, and absolute positioning will be useful to ensure it is appropriately placed relative to the input box.
You should only have one function, so it should be adaptable to the input fields, hence the reason for absolute positioning.
You will want to track the keypress and mouseclick events in this div, and ensure that only one is open at a time, so have an onblur so that if the user clicks anywhere else the div closes.
if you use jquery you can do this extremely easily.
you could tweak this to your liking:
<html>
<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
<script language='javascript'>
$(document).ready(function(){
$("input[type='text']").focus(function(){
$(this).parent().find('select').show();
});
$('select').change(function(){
$(this).parent().find('input[type="text"]').val($(this).val());
$(this).hide();
}).blur(function(){
$(this).hide();
});
});
</script>
<form>
<fieldset>
<input type='text' /><br/>
<select style='display:none;'>
<option value=''>----</option>
<option value='1'>opt1</option>
<option value='2'>opt2</option>
<option value='3'>opt3</option>
</select><br/>
</fieldset>
<fieldset>
<input type='text' /><br/>
<select style='display:none;'>
<option value=''>----</option>
<option value='1'>opt1</option>
<option value='2'>opt2</option>
<option value='3'>opt3</option>
</select><br/>
</fieldset>
<fieldset>
<input type='text' /><br/>
<select style='display:none;'>
<option value=''>----</option>
<option value='1'>opt1</option>
<option value='2'>opt2</option>
<option value='3'>opt3</option>
</select><br/>
</fieldset>
<fieldset>
<input type='text' /><br/>
<select style='display:none;'>
<option value=''>----</option>
<option value='1'>opt1</option>
<option value='2'>opt2</option>
<option value='3'>opt3</option>
</select><br/>
</fieldset>
</form>
</html>
if your select options need to be dynamic, ajax is very simple with jquery. if you already know what's going to be in there, have the php populate the hidden select boxes, and the focus event will show them.