Despite being aware of the many reasons against it, I find myself needing to proceed with this action. Utilizing the Jquery UI datepicker, I have designed a textbox to resemble a hyperlink. Everything is functioning perfectly, however, upon clicking the textbox, the blinking cursor appears. Is there a method to remove this?
Embed a hidden input element and display the a link. By clicking on the a link, it will activate the focus on the input.
Check out this example on jsFiddle
HTML
<input id="i" type="text" value="select date" />
<a id="open" href="#">select date</a>
JavaScript
$("#open").click(function(e){
e.preventDefault();
$("#i").trigger("focus");
});
$("#i").focus(function(){
alert("Open datapicker");
});
This approach may not involve CSS, but it offers a method to achieve the desired functionality...
function hideCursor(textboxId) {
var originalBox = document.getElementById(textboxId);
var clonedBox = originalBox.cloneNode(true);
clonedBox.id = clonedBox.name = '';
clonedBox.onclick = function(){
originalBox.setSelectionRange(clonedBox.selectStart, clonedBox.selectionEnd);
};
originalBox.onkeyup = function(){
clonedBox.value = originalBox.value;
};
originalBox.parentElement.insertBefore(clonedBox, originalBox);
originalBox.style.position = 'absolute';
originalBox.style.top = '-10000px';
}
Have you considered utilizing a concealed input along with an <a> to circumvent the issue completely?
Here is an example in HTML:
<div>
<a href="#" id="cal_link">select date</a>
<input type="hidden" id="cal" />
</div>
And in JavaScript:
$("#cal").datepicker({
buttonImage: 'http://jqueryui.com/demos/datepicker/images/calendar.gif',
buttonImageOnly: true,
showOn: 'button'
});
$("#cal_link").click(function() {
$("#cal").datepicker("show");
});
Feel free to experiment with it (you can customize the styling of the <div> and choose any desired buttonImage): http://jsfiddle.net/s5e6k/
As I cycle through some unordered lists, I aim to retrieve all of the descendants using the saved jquery-wrapped selectors. Below is the HTML snippet: <ul> <li><a href="#">item 1</a></li> <li><a href="#"> ...
I've come across multiple articles discussing ways to add line breaks to the .val in jQuery, but unfortunately none of them have worked for me. I attempted using the recommended workaround provided by jQuery: $.valHooks.textarea = { get: function( ...
I'm attempting to align the text-muted class to the right side of the page. I've tried floating it right, pulling it right, but nothing seems to be working. <table class="table table-bordered"> <tbody> <tr> < ...
Trying to make a CORS request and utilize async/await to extract the value from it (using jquery). The functions createCORSRequest and executeCORSRequest seem to be functioning correctly, so the implementation details are not my main concern. The function ...
When using the blur filter in my React application, everything works fine in Google Chrome and Microsoft Edge. However, I encountered an issue when testing it in Mozilla Firefox. Despite checking mozilla.org for solutions, I couldn't find anything spe ...
I have a list of users displayed in an HTML table that is dynamically created on page load. Each row includes an inline button with onclick="functionName(userId)" that triggers the following actions: When clicked, a Bootstrap modal popup is shown and the ...
Recently, I've been working on a JS project inspired by a short story from my high school days. The story featured robot crabs living on a small island, and I wanted to create a simulator where players could set the initial parameters and watch as the ...
In my asp.net app, I have multiple hrefs with dynamic Ids that all share the same CssClass called MyClass. I am looking to hide these buttons based on a certain condition. Initially, I used the .ready function: $(document).ready(function() { if(condit ...
I found this amazing script on Stack Overflow that allows me to move elements around the page using arrow keys. It works flawlessly, and I love how it enables diagonal movement by combining different arrow key inputs. Now, my query is whether it's fe ...
Text within the text box follows this format: login -u username -p password When entering this text, I want to substitute 'password' with a series of '*'s equal in length. For example: 'login -u <a href="/cdn-cgi/l/email-prot ...
Utilizing this code snippet, I have been able to obtain the width of an element and then set it as its height: $(document).ready(function(){ $(".equal-height").each(function(){ var itemSize = $(this).outerWidth(); cons ...
I am currently developing an application with Dropbox integration. However, during the authorization step, I encountered an issue stating: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost ...
After animating an element, I'm struggling to reset its CSS position back to its original state. I've experimented with stop(), queue:false, and specifying the desired css position after the animation finishes, but none of these approaches seem ...
I'm currently working on a project that involves utilizing the Wikipedia API. My goal is to create a link for each list item, but I'm encountering difficulty with proper concatenation. Here's the code snippet I'm using: for (var j=0 ...
I have developed a feature that highlights any text within a <p> tag in red based on a user-specified keyword. The current implementation works well, but it is slow when dealing with over 1000 lines of <p>. Is there a faster way to achieve this ...
Within one of my HTML files, I encountered the following line near the top: <script src="//maps.google.com/maps/api/js?key=apikey"></script> The API key is currently hardcoded in this file, but I would like to use a configuration option store ...
As a beginner in javascript and CSS, I am experimenting with creating a simple animation that adjusts the transparency of an image when triggered by an event. However, I am facing an issue where the animation only works every other time the function is cal ...
My custom responsive accordions are not functioning as expected. The requirement is to display headings and content for desktop view, but switch to accordions on smaller devices. I have managed to do this, however, when resizing the window, the functionali ...
While working with Bootstrap to create a top navbar on my webpage, I encountered some issues: Once the navbar dropdown is opened, I need to display an option list alongside an image positioned to the right of the list. The image should be the same height ...
Hey there! I'm working with a table that features a JavaScript function for a datepicker, as well as the ability to add and delete rows. The challenge I'm facing is that each new row created has the same ID as the previous one. How can I ensure t ...