Safari maintains the visibility of the placeholder when altering the value of a field using Javascript

Try running the code in Safari by visiting this link: https://jsfiddle.net/gkatsanos/2355m5ds/

In Safari, I noticed that when I change the .val() of an input field without manually focusing on it, the placeholder text remains visible. https://i.sstatic.net/C9zQk.png

$('a').on('click', () => {
  $('#stuff').val('lala');
});
input {
  width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
  <input id="stuff" type="text" placeholder="This Won't get removed in Safari when we change the value of the input">
  <a href="#">Click this</a>
</form>

Answer №1

I encountered a similar issue and sought help on the Apple community forum some weeks back. Despite upgrading to the latest version of jQuery, the problem persists. It seems likely that there has been an alteration in Apple's webkit that is causing incompatibility with jQuery.

https://i.sstatic.net/oBDB3.png

Answer №2

This issue arises specifically when the Javascript console is accessed in Safari.

For instance, if you relaunch Safari or open a new tab and execute the jsfiddle, everything will function properly. However, once you navigate to Develop->Show Javascript Console, strange behavior begins and persists even after closing the console.

I have officially notified Apple about this bug (#87261345).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transform every DIV element into a TABLE, replacing each DIV tag with a combination of TR and TD tags

I have a code that is currently structured using DIV elements. However, I've encountered alignment issues when rendering it in EMAIL clients. To address this problem, I am looking to convert the DIV structure to TABLE format. Below is the original co ...

Section of links spanning 4 columns in full-width

Planning to design a 4 column link section for an upcoming website, aiming to achieve the look in the provided screenshot. https://i.sstatic.net/pydBp.png Each box will serve as a clickable link, changing color on hover. Utilizing the Bootstrap framework ...

Combining various components within an inactive element tag using Vue

I am working on creating expandable rows for a table element using this HTML code snippet. The current approach involves alternating between parent rows and multiple rows within tbody elements. <tbody class="js-table-sections-header">Parent row</ ...

Determine the number of centimeters on the page as you scroll with jQuery

While searching for plugins that count up and down, I came across many. However, I am looking for something more unique: Imagine having an HTML page that is 70,000cm high. Now picture a counter in one corner that displays the height you are currently at a ...

The back button stops working following the execution of window.location.replace(href);

A simple function I created allows all containers to behave like links with the click of a button. function allHot(element){ $(element) .click( function(){ var href = $(this).find('a').attr('href'); window.location.replace(h ...

There seems to be an issue with retrieving data using an Ajax get request in Node.js and Express

I am currently working with an API in JavaScript: router.route('/books') .get(function(req,res){ Repository.getAll().done( function(result){ res.json(result);},function(err){res.send(err);}); }) .post(function(req,res){ ...

Adding a disabled internal Style node to the HTML5 DOM: A simple guide

According to this, the style tag can be turned off using the disabled attribute. I attempted the following: <head> <style>body { color: black; }</style> <style disabled>body {color: red; }</style> </head> <bo ...

Invalid URL redirection captured in the dynamic link

I'm currently facing a challenge in determining the correct window.location.href value for my button. It's worth noting that this process is dynamic and occurs across all pages. What I aim for is to direct it to the addnew function within the cur ...

Save the selected form data and store it as a hidden field in the form

There is a table available for users to select items from: <form action="submitSelection.php" method="post" role="form"> <table class="table table-condensed table-striped table-bordered"> <thead> <th scope="col">Code ...

Retrieving JSON data from a URL with PHP

Attempting to retrieve JSON data from the following URL: $search_data&format=json&nojsoncallback=1 The information I am aiming to obtain based on the above link is as follows: { "places": { "place": [ { ...

Exploring the relationship between jQuery plugins, inheritance, and RequireJS

I have a need to define an API that loads various jqueryui plugins using requirejs. The definition of which plugins to load is specified within the DOM content using data nodes: <div id="pluginContainer"> <div data-plugin="fooPlugin"/> ...

Attempted to utilize zipstatic but received no feedback

I attempted to utilize the Zipstatic API with jQuery in my code, as shown below. However, I am not receiving any response. Could there be something missing? jQuery(function() { jQuery("#form").hide(); jQuery("#postcode").keyup(function() { var c ...

Loading CSS and JS files in a modular manner

Each time I add a new HTML file to my website, I find myself repeating the process of including various CSS and JavaScript files: <!-- Source for .css style rules --> <link rel="stylesheet" type="text/css" href="/Hexdra/assets/css/style.css" ...

What is the best way to choose $(this) within a JavaScript expression inside a template literal?

Is it possible to use template literals in the append method and get the index of the row generated? I understand that calling "this" inside the function selects the specified selector passed as an argument. $(document).on('click', '.ad ...

Tips for effectively overriding default CSS in JavaFX 8 for TableView

I've been trying to customize the appearance of specific columns in a tableview using JavaFX. My goal is to make editable values display with a light yellow background to indicate that they can be edited. However, when I apply the following CSS to th ...

Why does one HTML link function while the other does not?

After creating links that connect two HTML files, I encountered an issue where one link does not work. The situation involves a folder named aiGame containing the aiindex.html file along with ai.js and ai.css. It is worth noting that the index.html file is ...

Troubleshooting a problem with CSS animations disappearing

I've been experimenting with CSS animations and I've run into a bit of a snag. I'm looking to create a div that fades in with a delay - meaning it won't be visible until the animation starts. Here's what I have so far: http://jsfi ...

How to pass data between components in Angular using @Input, @Output, and EventEmitter

After selecting a team from an array in one component, I am having trouble passing that selected team to another component. While I can log the selected team in the same component, I'm unable to access it in the other component. My goal is to use the ...

What is the best way to bring in a stylesheet from css modules in Next.js?

I want to incorporate React Grid Layout into my Next.js application. The installation instructions recommend including the following stylesheets in my application: /node_modules/react-grid-layout/css/styles.css /node_modules/react-resizable/css/styles.css ...

The image next to the words

Hey there, I'm looking to add a photo next to some text on my page using flexbox. I was able to achieve something similar but I'm open to other suggestions. Check out what I have so far here and here's the desired look: It should look like ...