I am using the title attribute to show a tooltip for a number input field. It works well, but this code is intended for mobile use so therefore the tooltip needs to show when the input field is clicked, rather than hovered over.
Here is an example of how the tooltip is currently displayed when hovered over:
<input title ="This should only show when input is clicked" type="number" id="price" value=1.80>
Is it possible to display a title tooltip on click, rather than on hover?
Here is a solution without jQuery:
function showTooltip() {
document.getElementById("price").title = "This should only show when input is clicked";
}
function removeTooltip() {
document.getElementById("price").title = "";
}
<input type="number" id="price" value="1.80" onfocus="showTooltip()" onfocusout="removeTooltip()" />
My solution was to use an info icon image and combine it with the tooltip function from an awesome library called jBox.
HTML
src="https://png.icons8.com/color/1600/info.png" class="myTooltip" title="I am a tooltip!" width="22px" height="auto">
JS
$(document).ready(function () {
new jBox('Tooltip', {
attach: '.myTooltip',
trigger: 'click',
position: {
y: 'bottom'
},
});
});
See this CodePen for a working demo
Related
I am trying to hide a placeholder while the input is being used and while there's text inside the input. Here's a simplified version of the HTML for the input and placeholder:
<div id="search-placeholder"><span class="fa fa-search"></span> Search</div>
<input id="search-input" type="text" name="search" />
I tried using jQuery but it does not return the desired result:
$(document).ready(function(){
$('#search-input').focus(function(){
$('#search-placeholder').fadeOut(100);
}).focusout(function(){
$('#search-placeholder').fadeIn(100);
});
});
The placeholder will hide when the input is selected, as it should. But it will show again when the user clicks elsewhere, even while the input is not empty! The placeholder is visible on top of the input value, so I tried a different approach:
$('#search-input').change(function(){
if($('#search-input').val() = '') {
$('#search-placeholder').fadeIn(100);
}else{
$('#search-placeholder').fadeOut(100);
}
})
Unfortunately, this only works when the user clicks elsewhere. The placeholder still shows while typing and while the input is selected, again showing itself on top of the input value. How do I hide <div id="search-placeholder"> while <div id="search-input"> is not empty, or when the input is selected by clicking or tapping it (on focus)?
Maybe try to check the value of the input in the focusout event and only show the placeholder if it's empty:
$(document).ready(function(){
$('#search-input').focus(function(){
$('#search-placeholder').fadeOut(100);
}).focusout(function(){
if($('#search-input').val() === '')
{
$('#search-placeholder').fadeIn(100);
}
});
});
I think you could extract the $('#search-input') and $('#search-placeholder') elements to variables, so the code becomes a bit more readable.
You do this using javascript and jquery
jquery :-
$(document).ready(function(){
$('#search-input').focus(function() {
$('#search-placeholder').fadeOut(100);
});
$('#search-input').focusout(function() {
if($('#search-input').val() === '') {
$('#search-placeholder').fadeIn(100);
}
});
});
javascript
var searchInput = document.getElementById("search-input");
var searchPlaceholder = document.getElementById("search-placeholder");
searchInput.onfocus = function() {
searchPlaceholder.style.display = "none";
}
searchInput.onfocusout = function() {
if(this.value == "") {
searchPlaceholder.style.display = "block";
}
}
if you want to add fade-in fade-out transitions in javascript method use css transition property- transition: opacity 1s and instead of changing style.display change style.opacity to 1(show) and 0(hide)
So i have an input with a dropdown underneath. So when i click into an input the dropdown opens. But i can't select anything from the dropdown cause it is not focussed. So when i click on a value it doesnt get selected and the dropdown closes again because it looses focus. So i am now wondering how i can include the div into the focus of the input.
HTML input:
<input type="text" class="form-control myInput" [(ngModel)]="textToSort"
(keyup)="onKeyDownAction($event)" (blur)="onBlurEventAction()" id="{{id}}"
(focus)="focusFunction()" (focusout)="unFocusFunction()"/>
HTML div (dropdown):
<div class="data-container" *ngIf="showDropDown" style="position: absolute;" >
<p
*ngFor="let data of dataList; let i = index"
class="data-list"
(click)="updateTextBox(i,data[columnName]); focusOnInput();"
[ngClass]="{highlight:checkHighlight(i)}"
> {{data[columnName]}}</p>
</div>
Component:
focusFunction(){
this.showDropDown = true;
}
unFocusFunction() {
this.showDropDown = false;
}
blur event happens on your input because of mousedownon list item
So in order to prevent this you need to add
(mousedown)="$event.preventDefault()"
handler for your list items.
I created simple demo:
https://stackblitz.com/edit/angular-x3cdr1
Have you in your CSS, tried setting the z-index to 1 for the dropdown class when it is expanded?
Please share a plunkr or a stackblitz link to look at the scenario.
The simplest approach would be as follows:
focusFunction(){
this.showDropDown = true;
}
unFocusFunction() {
setTimeout(() => { this.showDropDown = false; }, 500);
}
I think checking this stackblitz would help also:
https://stackblitz.com/edit/angular-search-filter?file=app%2Fapp.component.ts
Not sure how to style or change the text of the "Choose File" button inside of my file upload input field.
http://codepen.io/leongaban/pen/wrCLu
<input id="choose_file" type="file" name="datafile" size="40">
input {
padding: 10px 15px;
border: 0;
background: orange;
}
^ Here the background gets styled instead of the button.
As I told you in my comment you can simply create whatever layout and visuals you like to a button and create a file button then simply hide that file button and bind the event on the styled button to trigger the file button.
I've made this example for that purpose:
Codepen with custom file button
There are no native options for styling an input[type="file"] element. However, this article describes a cool (but hacky) trick you can use to accomplish this. Basically:
Create a button and style the layout as you would like it to appear.
Position your <input type="file" /> absolutely over the top of your new button element.
Add a z-index to the element to make it one level above the styled button.
Set the input to have an opacity: 0;
Wire up the proper events described in the article to make the input function accordingly.
CSS only solution
You can use the file-selector-button CSS pseudo-element
::-webkit-file-upload-button{
..
}
more information
Here is my straight-forward HTML 5 solution shown using an MVC Razor Form, but you could use a plain html form just as well. This solves the problem with the Input type=file not rendering the same in all browsers. You could style the browseBtn however you like by setting a background image for it. I tested this in IE 11, Firefox, and Chrome. IMO, the look of the default Chrome native control (shown in the question) is unacceptable.
Index.cshtml
<h2>Index</h2>
#using (Html.BeginForm("postFile", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div style="display:inline-block; margin-bottom:10px">
<input type="text" name="uploadControl" id="uploadControl"
style="width: 400px; height: 1.1em;" readonly="true" >
<button type="button" id="browseBtn" >Browse...</button>
</div>
<input type="file" name="upfile" id="upfile" style="display:none;" >
<button type="submit" id="uploadbtn" style="display:block">Click to upload</button>
<br><br>
#ViewBag.Message
}
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/UploadFile.js"></script>
UploadFile.js
$('#browseBtn').click(function () {
$('#upfile').first().trigger("click"); //cause the browse menu to pop up
});
$('#upfile').first().change(function (event) {
event.preventDefault();
var fileName = $('#upfile').val();
if (fileName && fileName.length > 0) {
$('#uploadControl').val(fileName);
}
});
HomeController.cs
public ActionResult postFile(HttpPostedFileBase upfile)
{
if (upfile != null && upfile.ContentLength > 0)
{
try
{
string path = Path.Combine(Server.MapPath("~/Images"),
Path.GetFileName(upfile.FileName));
//upfile.SaveAs(path);
ViewBag.Message = Path.GetFileName(upfile.FileName) + " uploaded successfully";
}
catch (Exception ex)
{
ViewBag.Message = "ERROR:" + ex.Message.ToString();
}
}
else
{
ViewBag.Message = "You have not specified a upfile.";
}
return View("Index");
}
In table I have 1 column in which text-box is given so that user can edit text in that as per their need ,edited text is getting saved onkeyup properly but i want to hide text-box border ,or i can say after editing text text-box should not be visible ,only the edited text should be visible ,and if user again wants to edit than user should be able to see that text-box when user click on text again,something like this I want textbox effect like this,and i don't want to use jquery,how can i do this
here is my code for textbox
echo "<td ><input id={remark{$j}} type=\"text\" onkeyup=\"writeremark(this.id,{$data_set1['eid']},{$emprid});\" value=\"{$data_set1['remark']}\" /></td>";
onkeyup function
function writeremark(e,eid,emprid) {
var val=document.getElementById(e).value;
var dataString = 'eid='+eid +'&emprid='+emprid +'&val='+val ;
$.ajax({
type:"POST",
url: "updateremark.php",
data: dataString,
success: function(result){
}
});
}
To Hide the Border you can use Javascript. onblur event is what you need, onblur means when you remove focus from this input, either by clicking outside of it, or by pressing TAB to give focus to another element.
<input type="text" id="myInput" onblur="HideBorder()" onfocus="ShowBorder()" />
function HideBorder()
{
var myInput = document.getElementById("myInput").style;
myInput.borderStyle="none";
}
Then when the user clicks back on it, you can use onfocus.
function ShowBorder()
{
var myInput = document.getElementById("myInput").style;
myInput.borderStyle="solid";
}
UPDATE
<input type="text" id="myInput" onblur="HideBorder(this.id)" onfocus="ShowBorder(this.id)" />
function HideBorder(id)
{
var myInput = document.getElementById(id).style;
myInput.borderStyle="none";
}
As Fiona T suggested, you can do this in CSS (better solution).
Give your input a class.
<input type="text" class="myInput" />
Then in CSS:
.myInput
{
border-style:none;
}
.myInput:hover
{
border-style:solid;
}
.myInput:focus
{
border-style:solid;
}
However, I suggest that you don't hide and show the border, because the size of the input may vary, you are technically removing the border which would be 1px,2px,3px...
So change the color instead of that, if your background is white, then...
.myInput
{
border-color:#FFFFFF;
}
.myInput:hover
{
border-color:#000000;
}
.myInput:focus
{
border-color:#000000;
}
I have multiple labels on a bar my web page and I want when I hover on that label, image in other div should change based on the label being hovered.
Any help would be highly appreciared.
Sjain
With jQuery, the popular javascript library, you could do it rather easily:
-- Sample HTML
<label class="target">Hover to Change</label>
<img src="image001.gif" class="sourceImage" />
-- Corresponding jQuery
$("label.target").hover(
function () {
// mousing-over <label class="target"> changes img to 'image002.gif'
$("img.sourceImage").attr("src", "image002.gif");
},
function () {
// mousing-out <label class="target"> changes img to 'image001.gif'
$("img.sourceImage").attr("src", "image001.gif");
}
);