I'm looking into creating a text editor for my site and really liked how Google Keep does their text input. At first look based on the HTML, they don't appear use input fields / text areas but rather some sort of javascript mode of input that takes text input and generates the HTML equivalent that text and places it in the DOM. So is it likely that they built their own input functionality to allow them and the user to manipulate the content they put in? Or is it more likely that they have an all purpose input field or something that captures the data and it's just hidden from view?
This is all I see when I go looking into the DevTools
<div contenteditable="true" aria-multiline="true" role="textbox" class="notranslate IZ65Hb-YPqjbf h1U9Be-YPqjbf" tabindex="0" spellcheck="true" dir="ltr">
This is their "input field"
<br>
That renders html
<br>
Based on the text that's entered
<br>
But I want to know how I should be capturing this text
</div>
The contenteditable="true" and role="textbox" tell the DOM to treat the <div> element like a <textbox>. According to the WAI-ARIA Standards, this approach allows those with reading impairments to navigate the screen more easily, as a screen reader would have a better idea of what elements are on the page.
Without seeing the rendered DOM, I can't be 100% sure what Google is doing, but it is very easy to manipulate the DOM based on user input as such. In the following example, I'm using targeting the input element, and then creating an onkeyup function that writes the content in a secondary 'output' <div>. This second <div> mirrors the input in the example, though can be coded to send the input to another page (or database) with AJAX, included elsewhere on the page, or styled to format the input in a nicer fashion.
// Initial text
document.getElementById('output').innerHTML = document.getElementsByClassName('h1U9Be-YPqjbf')[0].innerHTML
// On change
document.getElementsByClassName('h1U9Be-YPqjbf')[0].onkeyup = function() {
document.getElementById('output').innerHTML = document.getElementsByClassName('h1U9Be-YPqjbf')[0].innerHTML
}
.h1U9Be-YPqjbf {
border: 1px solid blue;
}
#output {
margin-top: 20px;
border: 1px solid red;
}
<div contenteditable="true" aria-multiline="true" role="textbox" class="notranslate IZ65Hb-YPqjbf h1U9Be-YPqjbf" tabindex="0" spellcheck="true" dir="ltr">
This is their "input field"
<br> That renders html
<br> Based on the text that's entered
<br> But I want to know how I should be capturing this text
</div>
<div id="output"></div>
Hope this helps! :)
I thinks behind the scenes they uses Firebase three way binding.
You can achieve the result with Angular and Firebase. Both are free to get started.
More here link
I have an URL field in my form.
The validator requires for it to have http:// in front of it,
which I think many people won't understand.
Could I have a "placeholder" that the user cannot delete or write before it?
Example: http:// myinputhere.com
<input type="url" placeholder="http://">
Placeholder doesn't concatenate the placeholder text to the user entered text, it's just for any information you would like to provide to your users, like some programmers do not use label instead they write placeholder for example
<input type="text" placeholder="Enter Username Here" />
So here you can do that is, either you can have a predefined http:// value..
<input type="url" value="http://" />
Or you can use JavaScript or jQuery for client side validation instead of HTML5 type="url" which will give only meaning to your semantics but you cannot rely on HTML5 validation only.
Also if you want to preserve your semantics by using type with a value of search or url than you can disable the HTML5 validation using novalidate attribute for your form tag.
OR
You can use multiple field, one with type set to url and other to text and you can concatenate both the field values ..
input[type=url] {
width: 40px;
}
<input type="url" value="http://" readonly />
<input type="text" />
Demo
Note: Using client side validation like HTML5 and JavaScript can be
easily disabled by your users, I would recommend you to have a server
side validation if this matters to you alot.. But relying on client
side validation ONLY is not good.
Why don't you use javascript in order to do so. I assume that you have any HTML tag like this
<input id="test" type="url" onclick="testJS()" placeholder="http://">
and try this following javascript
function testJS(){
var a = document.getElementById("test");
a.value = "http://";
}
You can display a span element over the input like this:
HTML:
<div class="wrapper">
<input type="url" />
<span>http://</span>
</div>
CSS:
.wrapper {
position: relative;
}
input {
padding-left: 48px;
}
.wrapper span {
position: absolute;
left: 2px;
}
Example
No, you cannot have initial content that cannot be deleted.
The question implies a wrong approach because a) users may need to delete http:// e.g. if they need to enter an https: URL, b) placeholders aren’t for this, c) if you use value="http://", it’s not a meaningful default value and it makes the control initially invalid, d) if you use type="url", you are asking for a control that takes an absolute URL as value and leaving it to browsers to implement that.
What you can do to help users who don’t know how to type an absolute URL is to use a title attribute, which has a special function in a context like this: its value will appear in an error message shown by the browser, if the user tries to submit the form when the control value is invalid. Example:
<input type="url" title="An absolute URL (usually starts with http://)">
You can either use Javascript and jQuery to do this. (still searching for solution)
Or you can put the http:// text in the text box with:
<input type='url' value='http://'>
Or you can add some text in front of the text box and then accept the input to be without the http:// text
<p style='display: inline-block'>http://</p><input type='url' style='display: inline-block'>
You can also use css positioning to show a span element on the input box and then add padding to the input box so that the user input won't go over the span element.
I would like to remove the "No file chosen" tooltip from a file input in Google Chrome (I see that no tooltip is displayed in Firefox).
Please notice that I'm talking not about the text inside the input field, but about the tooltip that appears when you move the mouse over the input.
I've tried this with no luck:
$('#myFileInput').attr('title', '');
The default tooltip can be edited by using the title attribute
<input type='file' title="your text" />
But if you try to remove this tooltip
<input type='file' title=""/>
This won't work. Here is my little trick to work this, try title with a space. It will work.:)
<input type='file' title=" "/>
For me, I just wanted the text to be invisible and still use the native browser button.
input[type='file'] {
color: transparent;
}
I like all of undefined's suggestions but I had a different use case, hope this helps someone in the same situation.
This is a native part of the webkit browsers and you cannot remove it. You should think about a hacky solution like covering or hiding the file inputs.
A hacky solution:
input[type='file'] {
opacity:0
}
<div>
<input type='file'/>
<span id='val'></span>
<span id='button'>Select File</span>
</div>
$('#button').click(function(){
$("input[type='file']").trigger('click');
})
$("input[type='file']").change(function(){
$('#val').text(this.value.replace(/C:\\fakepath\\/i, ''))
})
Fiddle
Very easy, forget CSS targeting the input["type"] thing, it doesn't work for me. I don't know why. I got my solution in my HTML tag
<input type="file" style="color:transparent; width:70px;"/>
End of the problem
I found a solution that is very easy, just set an empty string into the title attribute.
<input type="file" value="" title=" " />
You can disable the tooltip setting a title with a space on webkit browsers like Chrome and an empty string on Firefox or IE (tested on Chrome 35, FF 29, IE 11, safari mobile)
$('input[type="file"]').attr('title', window.webkitURL ? ' ' : '');
This one works for me (at least in Chrome and Firefox):
<input type="file" accept="image/*" title=" "/>
This is a tricky one. I could not find a way to select the 'no file chosen' element so I created a mask using the :after pseudo selector.
My solution also requires the use of the following pseudo selector to style the button:
::-webkit-file-upload-button
Try this: http://jsfiddle.net/J8Wfx/1/
FYI: This will only work in webkit browsers.
P.S if anyone knows how to view webkit pseudo selectors like the one above in the webkit inspector please let me know
Across all browsers and simple. this did it for me
$(function () {
$('input[type="file"]').change(function () {
if ($(this).val() != "") {
$(this).css('color', '#333');
}else{
$(this).css('color', 'transparent');
}
});
})
input[type="file"]{
color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" name="app_cvupload" class="fullwidth input rqd">
All the answers here are totally overcomplicated, or otherwise just totally wrong.
html:
<div>
<input type="file" />
<button>Select File</button>
</div>
css:
input {
display: none;
}
javascript:
$('button').on('click', function(){
$('input').trigger('click');
});
http://jsfiddle.net/odfe34n8/
I created this fiddle, in the most simplistic way. Clicking the Select File button will bring up the file select menu. You could then stylize the button any way you wanted. Basically, all you need to do is hide the file input, and trigger a synthetic click on it when you click another button. I spot tested this on IE 9, FF, and Chrome, and they all work fine.
You will need to customise the control quite a lot to achieve this.
Please follow the guide at: http://www.quirksmode.org/dom/inputfile.html
Wrap with and make invisible.
Work in Chrome, Safari && FF.
label {
padding: 5px;
background: silver;
}
label > input[type=file] {
display: none;
}
<label>
<input type="file">
select file
</label>
It's better to avoid using unnecessary javascript. You can take advantage of the label tag to expand the click target of the input like so:
<label>
<input type="file" style="display: none;">
<a>Open</a>
</label>
Even though input is hidden, the link still works as a click target for it, and you can style it however you want.
Even you set opacity to zero, the tooltip will appear. Try visibility:hidden on the element. It is working for me.
It works for me!
input[type="file"]{
font-size: 0px;
}
Then, you can use different kind of styles such as width, height or other properties in order to create your own input file.
Give -webkit-appearance: a go. Worth a try anyway.
http://css-infos.net/property/-webkit-appearance
Hope that helps :)
Directly you can't modify much about input[type=file].
Make input type file opacity:0 and try to place a relative element [div/span/button] over it with custom CSS
Try this
http://jsfiddle.net/gajjuthechamp/pvyVZ/8/
Surprise to see no one mentioned about event.preventDefault()
$("input[type=file]").mouseover(function(event) {
event.preventDefault();
// This will disable the default behavior of browser
});
you can set a width for yor element which will show only the button and will hide the "no file chosen".
I look for good answer for this... and I found this:
First delete the 'no file chosen'
input[type="file"]{
font-size: 0px;
}
then work the button with the -webkit-file-upload-button, this way:
input[type="file"]::-webkit-file-input-button{
font-size: 16px; /*normal size*/
}
hope this is what you were looking for, it works for me.
Combining some of the suggestions above, using jQuery, here is what I did:
input[type='file'].unused {
color: transparent;
}
And:
$(function() {
$("input[type='file'].unused").click( function() {$(this).removeClass('unused')});
};
And put the class "unused" on your file inputs. This is simple and works pretty well.
The best solution, for me, is to wrap input [type="file"] in a wrapper, and add some jquery code:
$(function(){
function readURL(input){
if (input.files && input.files[0]){
var reader = new FileReader();
reader.onload = function (e){
$('#uploadImage').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#image").change(function(){
readURL(this);
});
});
#image{
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 75px;
height: 35px;
}
#uploadImage{
position: relative;
top: 30px;
left: 70px;
}
.button{
position: relative;
width: 75px;
height: 35px;
border: 1px solid #000;
border-radius: 5px;
font-size: 1.5em;
text-align: center;
line-height: 34px;
}
<form action="#" method="post" id="form" >
<div class="button">
Upload<input type="file" id="image" />
</div>
<img id="uploadImage" src="#" alt="your image" width="350" height="300" />
</form>
I came up with a hacky solution that totally removes "No file chosen" plus the extra space that is added after that text (in Chrome I get something like:
"No file chosen ").
This was totally messing up my page alignment, so I really fought with it to find a solution. Inside the input tag's style attribute, setting "width" to the width of the button will eliminate the trailing text and spaces. Since the width of the button is not the same in all browsers (it's a little smaller in Firefox, for example), you'll also want to set the style's color to the same color as the background of the page (otherwise a stray "No" may show through). My input file tag looks like this:
<input style="float:left; **width:88px;** **color:#000000;**" type="file" id="fileInput" onclick="fileOpen()">
I know it is a bit of a hack, but all I required was to set the color to transparent in the style sheet - inline would look like this style="color:transparent;".
Best option to Hide the tooltip is combining the following properties :
On the input : color:white; (if the background is white to blind the color of text, if another color, use that color).
if there is any other element next to the input use position: absolute; to place the element above the tooltip *( be careful leave the button visible, hide just the tooltip)
For anybody that the 3 top did not work:
create your input element:
<input type='file' name='file' id='file' />
set style for the input element by it's Id to where it appears non-existent:
#file{ color: #ffffff; width: 0px; }
then create a new button infront of the original input, with onclick function to run javascript that clicks the original input:
<button onclick='clicker()'>BROWSE</button><input type='file' name='file' id='file' />
// can see the new button but not the original input:
Javascript:
function clicker(){ document.getElementById('file').click(); }
RESULT:
function clicker(){
document.getElementById('file').click();
}
#file{
color: #ffffff;
width: 0px;
}
<html>
<head>
</head>
<body>
FILE: <button onclick='clicker()'>BROWSE</button><input type='file' id='file'/>
<br>
</body>
</html>
style="color: transparent; width:110px"
This solution worked for me as below:
<input class="ml-4"
type="file"
style="color: transparent; width:110px"
ng2FileSelect
[uploader]="uploader"
multiple />
Forget about removing the tooltip. Make the capacity of file input into zero, put a div box above it with absolute position, so whenever you click on the div, the file input would prompt.
<div class="file_cover">Click to upload file</div>
<input type="file">
input[type='file'] {
opacity: 0;
}
.file_cover {
position: absolute;
top: 0;
}
I want to change the image of my button when the mouse goes over it.
I rode the DHTML event onmouseover, can do that for me, but how?
Do i need to create a javascript also for it?
What should i do to make it work?
This is my current code:
<h:commandButton class="btn" image="/resources/images/mainbtn1.png" onmouseover="/resources/images/mainbtn2.png"/">
The <h:commandButton image="foo.png"> generates a HTML <input type="image" src="foo.png">. The onmouseover attribute (like as all on* attributes) should point to JavaScript functions. However, you're putting the image path plain there. This would only result in a JavaScript error (which you would have noticed if you were using Firebug or WDT).
You need to write some JS which changes the src attribute of the image button accordingly:
onmouseover="this.src='/resources/images/mainbtn2.png'"
Don't forget to add an onmouseout which changes the image back.
Unrelated to the concrete problem, the normal practice is to use CSS background images for this. The HTML <input type="image"> has technically an entirely different purpose. It represents namely an image map which allows you to send the mouse coordinates of where you have clicked in the image map. You're apparently not interested in this information as you're not using a static image.
E.g.
<h:commandButton value="" styleClass="mybutton" />
which generates
<input type="submit" value="" class="mybutton" />
and add this CSS (kickoff example)
.mybutton {
margin: 2px;
padding: 0;
border: 0;
width: 100px;
height: 20px;
background-image: url('foo.png');
cursor: pointer;
overflow: visible;
}
.mybutton:hover {
background-image: url('bar.png');
}
This is not only better reuseable/maintainable, but also doesn't require JS support.
Yes, all onXXX attributes are for JavaScript event handlers. You need to have a JavaScript function written for that. Something like this:
function changeImage() {
this.style.backgroundImage = "url('path/to/image.png')";
}
And invoked using:
<h:commandButton class="btn" image="/resources/images/mainbtn1.png" onmouseover="changeImage()" />
Note: I can't provide you the exact JavaScript as it entirely depends on how the markup is generated by the JSF library that you're using.
This question already has answers here:
Styling an input type="file" button
(46 answers)
Closed 7 years ago.
Possible Duplicate:
Styling an input type=“file” button
I was trying to style
<input type="file">
but i have not had much luck. I want to make the textbox disappear and only keep the button. How can I do it?
The CSS way (base code found here):
<html>
<style type="text/css">
div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
div.fakefile input[type=button] {
/* enough width to completely overlap the real hidden file control */
cursor: pointer;
width: 148px;
}
div.fileinputs input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
</style>
<div class="fileinputs">
<input type="file" class="file" />
<div class="fakefile">
<input type="button" value="Select file" />
</div>
</div>
</html>
There is no easy cross-browser way to style the input type of files. Therefore there exist solution that even use javascript.
Here is a jQuery plugin you can use to style file types in the cross-browser fashion:
File Style Plugin for jQuery
Browsers do not let you style file
inputs. File Style plugin fixes this
problem. It enables you to use image
as browse button. You can also style
filename field as normal textfield
using css. It is written using
JavaScript and jQuery.
You can check out the demo here
As also posted on popular ajaxian.com, you can take a look at this too:
A Cheaky Way to Style an input type=”file”
Shaun Inman has got a lovely little
hack that allows you to style file
inputs with CSS and the DOM.
These elements are notoriously painful
to deal with, and now we have select
boxed playing nice on IE, we need
something else to fix up :)
I wrote this jQuery plugin to make it much simpler to style the file input. Use CSS and "fake elements" to get the results you want.
http://github.com/jstnjns/jquery-file
Hope that helps!
<label for="file" style="/* style this one, as you want */">Upload file</label>
<input id="file" name="file" type="file" style="display:none;">
some browsers need File input visible and click the browse button manually, or it will submit nothing to server. so i suggest Saefraz's first solution: File Style Plugin for jQuery