Can anyone provide a solution for implementing text stroke in <input type="text"/> that works across all major browsers (Firefox, Google Chrome, Safari, Opera, IE7+)?
Is there any method using CSS 2.1 or jQuery to achieve this effect?
Can anyone provide a solution for implementing text stroke in <input type="text"/> that works across all major browsers (Firefox, Google Chrome, Safari, Opera, IE7+)?
Is there any method using CSS 2.1 or jQuery to achieve this effect?
It appears that the discussion is centered around the css property text-stroke (-webkit-text-stroke). This feature is only fully supported in webkit browsers, leaving Internet Explorer unable to properly implement it. Nevertheless, a workaround can be achieved using text-shadow, which is compatible with ie7+ as well. For those who require this effect in Internet Explorer, more information can be found at this link.
To mimic the look, you can use the following code snippet:
.stroke_text {
color: white;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
For inline styling, you can apply it like so:
<input type='text'
style="color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; width:200px; font-size:20px;" />
The main limitation of this method is that the shadow must remain at 1px, otherwise the visual effect may appear distorted compared to text-stroke. Consider utilizing conditional css to switch between text-stroke and this alternative depending on browser support.
I'm a little confused about your request, but here is a possible solution:
<input type="text" onkeyup="function_you_want_tocall()" />
Considering the ambiguous nature of the inquiry, you are presented with several options:
$('inputField').focus(function() { ... } ); // triggers when input field gains focus
$('inputField').blur(function() { ... } ); // activates when input field loses focus
$('inputField').keyup(function() { ... } ); // executes when a key is released
$('inputField').keypress(function() { ... } ); // runs when a printable key is pressed
If you're looking to incorporate jQuery into your project, consider the following example:
$(document).ready(function() {
$("input[type='text']").keypress(function() {
// Your logic can be implemented here
});
});
This code snippet will attach a keypress event handler to all input elements with type=text. If you prefer targeting a specific element by its ID, simply replace $("input[type='text'] with $("#your_id"). Additionally, experiment with keydown and keyup events to determine which best fits your requirements.
This is the code I used for applying hover effect to days in a full calendar. function handlerIn(){ $(this).css({'background-color':'#4d576c','color':'#fff'}); } function handlerOut(){ if($(this).hasClass(&a ...
Our website features the fotorama slider which can be viewed here: However, we are experiencing an issue where upon the initial page load, the slider appears in a small area in the top left corner of the container. It only displays correctly when the brow ...
I've encountered an issue where my 2×3 grid of images and text is perfectly centered on desktop but has a strange offset on mobile devices. Here's how it appears on the desktop: https://i.sstatic.net/HXqFq.jpg and here's the layout on mob ...
Recently, I came across the following code snippet in my asp.net application: <aspext:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> <Scripts> <asp:ScriptReference Name="AjaxControlToolkit.Common.Common.js ...
I have an input text field and I am looking to pass the values entered inside the element through a JavaScript onClick event. <form> <fieldset> <label>Common Site ID: </label><span><?php echo $commonsiteid ?>< ...
Can someone help me figure out how to create a form that generates a unique set of random numbers from the range (0,9) displayed in a group of button tags? I've written some javascript code but it's not quite working as intended. (function($) ...
Currently, I am utilizing the jquery validation plugin and aiming to utilize the errorPlacement function in order to include error messages to the fields title attribute and display only a ✘ next to the field. Everything works as intended when the form ...
When the value of the first input in HTML is 0, then display "PAID" as the value of the second input. If the value of the first input is not 0, then show "NOT PAID" as the value of the second input. <label>Balance Amount</label> / ...
Embarking on my first VueJS project, I decided to create a global stylesheet to maintain consistent styles across different components. After installing the SCSS loader and setting up my stylesheets, I encountered an issue. $mainFont: 'PoppinsRegular, ...
In a popup, there are two forms that alternate display - one for editing (loaded via ajax) and one for creation. Using jQuery validation, I aim to show hints for both editing and field submission. The validation includes ensuring time spans do not overla ...
How can I apply a top margin to each li element within a ul element that utilizes the css property column-count: 2? I am facing an issue where the margin is being applied to every li element except the first one in the second column: ul { column-count ...
Is it feasible to identify the existence of a key/value pair in any type or level of object, regardless of its structure being unknown beforehand? For instance: Pair to find: "kod": "REVH" Object: { "names": [{ "name1": "xxx", "name2": "yyy", ...
Just when I thought styling my background with a simple line of code would be easy, I encountered an unexpected issue. Instead of a smooth linear-gradient from the top left to the bottom right, my background is showing rows of red and blue in between each ...
Looking to build a blog page using AngularJS and running into an issue with the message section. Currently, I have a div set up like this: <div class="post-content"> {{jsonPost.message}} </div> Within the jsonPost.message variable, I have ...
Dealing with two unruly elements - a fixed navigation menu and background bar causing opacity issues. They should mimic the parent's width, set to 100%, but extend outside when the window is narrowed. Below is a diagram of the html structure: <htm ...
Is there a way to incorporate a horizontal scrollbar into an Ajax Datatable? I attempted to use "ScrollX" :true, however, this method did not prove successful. $(document).ready(function () { $('#myDataTable1').DataTable({ "aj ...
One of the features in my video player is a skip button that allows users to jump to the end of the video. Below is the HTML code for the video player: <video id="video1" style="height: 100%" class="video-js vjs-default-skin" controls muted autoplay=" ...
Currently, I have multiple p elements that trigger the redo function upon being clicked. When a p element is clicked, the quest[q] template is loaded onto the .form div. These templates are essentially previously submitted forms that sent values to an obj ...
Upon initial launch of the mobile app homepage, an error is encountered. The error message "TypeError: Jqueryxxxxxx is not a function" is displayed, although the API callback results are shown as "jQuery111309512500500950475_1459208158307({"code":1," ...
I'm attempting to create a SELECT ALL checkbox that can be clicked on the label itself. Currently, only alert statements are triggered when clicking the label. On the right side under Asset Types, there is a checkbox that, when checked, selects all o ...