I tried to define tokenfield on a textarea with more height but its displaying as a textbox (single line). How can I customize the tokenfield to work with a textarea?
<textarea name="f1_email" placeholder="Enter Friends's Email separated by comma" class="f1-facebook form-control" rows="10" cols="30" id="f1-referral-email"></textarea>
$('#f1-referral-email').on('tokenfield:createdtoken', function (e) {
var valid = isEmail(e.attrs.value);
if (!valid) {
$(e.relatedTarget).addClass('invalid')
}
}).tokenfield()
ACTUAL OUTPUT:
Any help or advice is appreciated, Thank you in advance.
As what stated here, tokenfield can be adjusted by it's CSS(bootstrap-tokenfield.css). Please examine and look for (input-sm, input-lg etc). This is just a hack to create a custom textarea. Then select the appropriate class in your input tag. Or if you wanted to create a custom size refer to code below:
HTML:
<div class="form-group form-group-xl">
<input type="text" class="form-control" id="my-tokenfield">
</div>
CSS:
.form-group.form-group-xl .form-control {
height: 50px;
line-height: 50px;
}
.form-group.form-group-xl .tokenfield {
height: auto;
min-height: 50px;
}
Related
I am adding input via jQuery but can't type anything in it, on click the default blue outline appears and disappears at once. What can be wrong?
jQuery:
$('#user_description').html('<input type="text" value="" />')
CSS:
#user_description input {
width: 300px;
height: 31px;
background: #403a48;
border: none;
}
Try to use append instead of html like this:
$('#user_description').append('<input type="text" value="" />')
And take a look at this:
http://api.jquery.com/append/
Please refer to this demo of input fields in angular material design. My problem is that while most fields like input passwords have "floating" labels the date input does not show anything, especially when the placeholder is hidden (because the date is pre-filled).
This makes the form very confusing, since there is no prompt on what the date dropdown represents on the form (and what the user is supposed to do).
How can I add a floating label similar to input fields to the md-datepicker? To make the form filling more obvious and also give my forms a consistent look?
You should use an input container:
<md-input-container>
<label>Last update</label>
<md-datepicker ng-model="user.updated_at"></md-datepicker>
</md-input-container>
Okay, after a bit of messing around with css, I finally figured out the following solution:
CSS:
.date-picker-row {
margin-left: -15px;
position: relative;
min-height: 60px;
}
.date-picker-row label {
position: absolute;
top: -10px;
left: 50px;
color: rgba(0, 0, 0, 0.541176);
font-size: 12px;
}
.date-picker-row .md-datepicker-input-container {
margin-left: 0;
}
HTML:
<div layout-gt-sm="row">
<div flex-gt-sm class="date-picker-row">
<label for="email" translate>Signup date</label>
<md-datepicker ng-model="user.created_at" md-placeholder="Signup date"></md-datepicker>
</div>
<div flex-gt-sm class="date-picker-row">
<label for="email" translate>Last update</label>
<md-datepicker ng-model="user.updated_at" md-placeholder="Update date"></md-datepicker>
</div>
</div>
I can't seem to figure out any way to remove the "No file selected" text that shows up next to inputs of type "file".
Do you guys know any way how to remove this text?
input[type='file'] {
color: transparent;
}
Enjoy
There is no cross-browser way to do this. The "no file selected" text is in the implementation-defined part of the widget, and I don't believe that most browsers offer much in the way of browser-specific customization. On the other hand, you could simply use CSS to cover the text with something when the value attribute is empty.
You can do this by defining a width to the input and hiding the exceeding content (the undesired "No file selected" text).
input {
width: 132px;
overflow:hidden;
}
Here is the demonstration on jsfiddle.
Beware: each language has its own default text and it may render different input sizes. In brazilian portuguese that 132px width is fine!
My answer was based on this similar question on stackoverflow.
You can replace the file field with a button with the answer to this question: file upload button without input field?
CSS
<style>
#image_file{
position: relative;
width: 188px;
border: 1px solid #BBB;
margin: 1px;
cursor: pointer;
float: left;
}
</style>
HTML
<input id="image_file" onclick="getFile()" onfocus="this.blur()" value=""/>
<div style='height: 0px;width: 0px; overflow:hidden;'>
<input type="file" id="PinSpot_file">
</div>
<input type="button" onclick="getFile()" style="background-color: #DDD;" value="Browser" >
JAVASCRIPT
function getFile(){
document.getElementById("PinSpot_file").click();
}
// Event when change fields
$('#PinSpot_file').live('change', function(e) {
var file = this.value;
var fileName = file.split("\\");
document.getElementById("image_file").value = fileName[fileName.length-1];
//AJAX
}
This is a really good hack and its a lot cleaner.
HTML
<div id="file_info' style='display:inline;'>Browse</div>
<input type="file" name='file[]' multiple style='opacity: 0;' onchange='displayFileName()'/>
JS
function displayFileName() {
var files = $('input[type="file"]')[0].files;
document.getElementById('file_info').innerHTML = files.length + " images to upload";`
}
Well, since there is no way to completely disable the text, I'd suggest either placing an element over the text or try the following solution..
CSS
input[type="file"] {
width: 90px; /* Keep it under 100px in order to hide the unwanted text. */
}
and add an html inline-title attribute to the element to hide the "No File Chosen" hover text.
HTML
<input type="file" id="FileId" title="">
or, you could do it all with JavaScript.
JS
document.addEventListener('DOMContentLoad', myFunction);
function myFunction() {
const FilePicker = document.getElementById('FileId');
FilePicker.style.width = "90px";
FilePicker.title = ""; // Leave This Empty
}
You can try this. Its work for me firefox browser
<style type="">
input[type='file'] {
color: transparent;
}
</style>
I have this code. I've done this for years now but I'm stumped with the result of this example. The purpose is to make the text box visible and put the contents of the clicked SPAN tag in it.
document.onclick = CaptureClickedElement;
function CaptureClickedElement(e)
{
var EventElement;
if(e==null)
EventElement = event.srcElement;// IE
else
EventElement = e.target;// Firefox
if( EventElement.tagName == "SPAN")
{
document.getElementById("divTXT").style.display="";
document.getElementById("txt").value = document.getElementById("Span1").innerHTML;
alert(document.getElementById("Span1").innerHTML)
}
}
Strangely though, it DOES show the contents but also shows open/close SPAN tags at the end of it. If I alert ther results, the same thing is shown.
Please find the attached screen shot of it here.
Does anyone have an idea of why this is happening?
Thanks!
Here is the HTML (copied from comments by mplungjan)
<style type="text/css">
#divOuter {
width: 100px;
height: 70px;
border: 1px solid blue;
float: left;
}
</style>
<body>
<div>
<form name="frm" method="post" action="">
<div id="divTXT" style="display:none">
<input type="text" id="txt" name="txt" value="" size="30" />
</div>
</form>
</div>
<div id="divOuter">
<span id="Span1">hi, this is a test.<span>
</div>
</body>
Structure problem:
<span id="Span1">hi, this is a test.<span>
Note the absence of a proper close to the span.
Need to use .innerText (for IE) and .text for others.
The site is here
I have opt to using the radiobutton's labels as customized buttons for them. This means the radio inputs themselves are display:none. Because of this, the browsers don't tab stop at the radio labels, but I want them to.
I tried forcing a tabindex to them, but no cigar.
I have came up with just putting a pointless checkbox right before the labels, and set it to width: 1px; and height 1px; which seems to only really work on chrome & safari.
So do you have any other ideas for forcing a tab stop at those locations without showing an element?
Edit:
Just incase someone else comes by this, this is how I was able to insert small checkboxes into chrome & safari using JQuery:
if ($.browser.safari) {
$("label[for='Unlimited']").parent().after('<input style="height:1px; width:1px;" type="checkbox">');
$("label[for='cash']").parent().after('<input style="height:1px; width:1px;" type="checkbox">');
$("label[for='Length12']").parent().after('<input style="height:1px; width:1px;" type="checkbox">');
}
Note: $.browser.webkit was not becoming true...so I had to use safari
a working solution in my case to enable tab selection / arrow navigation was to set the opacity to zero rather than a "display: none"
.styled-selection input {
opacity: 0; // hide it visually
z-index: -1; // avoid unintended clicks
position: absolute; // don't affect other elements positioning
}
Keep the radio input hidden, but set tabindex="0" on the <label> element of reach radio input.
(A tab index of 0 keeps the element in tab flow with other elements with an unspecified tab index which are still tabbable.)
If you separate the label from any field and set a tabIndex you can tab to it and capture mouse and key events. It seems more sensible to use buttons or inputs with type="button",
but suit yourself.
<form>
<fieldset>
<input value="today">
<label tabIndex="0" onfocus="alert('label');">Label 1</label>
</fieldset>
</form>
I have an alternative answer that I think has not been mentioned yet. For recent work I've been reading the Mozilla Developer Docs MDN Docs, Forms, especially the Accessibility Section MDN Docs, Accessible HTML(5), for information related to keyboard accessibility and form structure.
One of the specific mentions in the Accessibility section is to use HTML5 elements when and where possible -- they often have cross-browser and more accessible support by default (not always true, but clear content structure and proper elements also help screen reading along with keyboard accessibility).
Anyway, here's a JSFiddle: JSFiddle::Keyboard Accessible Forms
Essentially, what I did was:
shamelessly copy over some of the source code from a Mozilla source code to a JSFiddle (source in the comments of the fiddle)
create a TEXT-type and assign it the "readonly" HTML5 attribute
add attribute tabindex="0" to the readonly
Modify the "readonly" CSS for that input element so it looks "blank" or hidden"
HTML
<title>Native keyboard accessibility</title>
<body>
<h1>Native keyboard accessibility</h1>
<hr>
<h2>Links</h2>
<p>This is a link to Mozilla.</p>
<p>Another link, to the Mozilla Developer Network.</p>
<h2>Buttons</h2>
<p>
<button data-message="This is from the first button">Click me!</button>
<button data-message="This is from the second button">Click me too!
</button>
<button data-message="This is from the third button">And me!</button>
</p>
<!-- "Invisible" HTML(5) element -->
<!-- * a READONLY text-input with modified CSS... -->
<hr>
<label for="hidden-anchor">Hidden Anchor Point</label>
<input type="text" class="hidden-anchor" id="hidden-anchor" tabindex="0" readonly />
<hr>
<h2>Form</h2>
<form name="personal-info">
<fieldset>
<legend>Personal Info</legend>
<div>
<label for="name">Fill in your name:</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="age">Enter your age:</label>
<input type="text" id="age" name="age">
</div>
<div>
<label for="mood">Choose your mood:</label>
<select id="mood" name="mood">
<option>Happy</option>
<option>Sad</option>
<option>Angry</option>
<option>Worried</option>
</select>
</div>
</fieldset>
</form>
<script>
var buttons = document.querySelectorAll('button');
for(var i = 0; i < buttons.length; i++) {
addHandler(buttons[i]);
}
function addHandler(button) {
button.addEventListener('click', function(e) {
var message = e.target.getAttribute('data-message');
alert(message);
})
}
</script>
</body>
CSS Styling
input {
margin-bottom: 10px;
}
button {
margin-right: 10px;
}
a:hover, input:hover, button:hover, select:hover,
a:focus, input:focus, button:focus, select:focus {
font-weight: bold;
}
.hidden-anchor {
border: none;
background: transparent!important;
}
.hidden-anchor:focus {
border: 1px solid #f6b73c;
}
BTW, you can edit the CSS rule for .hidden-anchor:focus to remove the highlight for the hidden anchor if you want. I added it just to "prove" the concept here, but it still works invisibly as requested.
I hope this helps!
My preference:
.tab-only:not(:focus) {
position: fixed;
left: -999999px;
}
<button class="tab-only">Jump to main</button>
Another great option would be to nest your input + div in a label and hide the input by setting width and height to 0px instead of display: none
This method even allows you to use pseudo-classes like :focus or :checked by using input:pseudo + styleDiv
<label>
<input type="radio">
<div class="styleDiv">Display text</div>
</label>
input
{
width: 0px;
height: 0px;
}
input + .styleDiv
{
//Radiobutton style here
display: inline-block
}
input:checked + .styleDiv
{
//Checked style here
}
Discard the radio-buttons and instead; keep some hidden fields in your code, in which you store the selected value of your UI components.