Eliminate placeholder text when the tab key is pressed

I'm currently facing an issue with a textarea that has a placeholder and the Tab key functionality in Internet Explorer. I've included placeholder.js to make it work, but when I repeatedly press the tab key and focus on the textarea, the placeholder does not disappear. How can I solve this problem?

Below is my code:

HTML

<textarea name='body'  rows='2' cols='100' onkeydown="textCounter(document.wireForm.body,document.wireForm.remLen1,240)" onkeyup="textCounter(document.wireForm.body,document.wireForm.remLen1,240)" id="thewire_large-textarea" placeholder="<?php echo $msg;?>" ></textarea>

I have tried using jQuery:

$('#thewire_large-textarea').keyup(function() {
    if (input.val() != "") {
        placeholder.hide();
    }
});

However, the issue persists. Can someone please guide me on how to remove the placeholder when the tab key is pressed?

javascriptjqueryhtmlcss

Answer №1

One possible solution is to utilize the focus event, as the tab key triggers focus.

$('#thewire_large-textarea').focus(function() {
    if ($(this).val() != "") {
        $(this).attr('placeholder', ''); // remove the placeholder value
    }
});

Additionally, it is important to check the current element's value.

To demonstrate this, I have prepared a Fiddle that sets the focus on the first input field. By pressing the tab key, you will navigate to the textarea and observe how the placeholder gets removed.

http://jsfiddle.net/afzaal_ahmad_zeeshan/SJ6wZ/

Answer №2

I found a solution provided by @Afzaal Ahmad Zeeshan which works flawlessly, so be sure to give him an upvote. To enhance his answer, I have included the following function below. In case you tab on the textarea and then tab again, the placeholder disappears. If you start typing something, it's fine, but if not, the placeholder does not reappear until you add the following:

$('input').focus();
$('textarea').focus(function () {
    $(this).attr('placeholder', '');
});
//add this 
$('textarea').blur(function () {
    $(this).attr('placeholder', 'Spread love, not hate! :)');
});

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

Manage image placement using CSS object-position

I have the following code snippet: img{ width: 100%; height: 1000px; object-fit: cover; object-position: left; } <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

javascripthtmlcssimageobject-position

npm is consolidating all dependencies and their sub-dependencies into a single unified directory

My project has a package.json file with approximately 20 dependencies. Upon running npm install, all the dependencies and sub-dependencies end up in the main node_modules directory, resulting in hundreds of modules rather than just my intended 20. The sub- ...

javascriptlinuxnode.jsnpm

Unexpected outcomes when trying to sort and paginate React-Table

Experiencing unexpected results with react-table integration for pagination and sorting. Merged examples from the react-table repository. Encountering an issue where table hooks reset the page index on re-render, causing fetchData to be called twice during ...

javascriptreactjsreact-table

What is the best way to present a specific row layout using HTML and CSS?

Can someone assist me in creating rows of links in html+css with a specific layout? The desired format should follow this structure: (Psuedocode) <body class="class_with_minmaxwidth_set_in_css"> <div class="container"> <div class ...

htmlcss

Using Node.js Express to showcase a JSON file utilizing Class Methods

Recently diving into node.js and express, I attempted to display a JSON file containing an array of 3 objects using a class method Below is the Class structure: const fs = require('fs') class GrupoArchivo { constructor(filePath) { t ...

javascriptnode.jsarraysjsonexpress

Using PHP, JavaScript, and Bootstrap to display success or error messages for form fields through AJAX

I am working on a form where users input an 'authorisation code' that is then checked against a database using AJAX and PHP. Currently, the form displays a tick if the code is valid and a cross if it is incorrect. I would like to utilize Bootstra ...

javascriptphpajax

Is there a definitive way to distinguish between scrollTop and scrollHeight in web development?

For instance, function checkingScroll(){ var newHeight = element.scrollHeight; var scrollTopValue = element.scrollTop; alert("The scrollHeight property is: " + newHeight + "px"); alert("The scrollTop property is: " + scrollTopValue ...

javascripthtml

What causes the 'then' method of my angular service to return a resolved promise instead of the expected value?

I am perplexed as to why the "result" in this code snippet is a resolved promise instead of the actual value: searchService.getLink(vm.queryObject).then(function (result) { console.log(result); }); The implementation for the getLink() function is pro ...

javascriptangularjsangular-promise

How to efficiently use promises within loops in JavaScript

I recently delved into Javascript and I'm still struggling with how promises work within loops. Currently, I am utilizing repl.it db for my project. Let's say I have an array consisting of keys, and my goal is to query each key in the array to st ...

javascriptnode.jsdiscord.jsreplit

Unable to insert a new module position within the vertex joomla framework

I have successfully added a new module position to the right side of the menu in Joomla 3 using the S5 Vertex framework. The changes were made in index.php as follows: <div id = "s5_newmodule"> <?php s5_module_call('s5_newmodul ...

phpcssjoomlaframeworksposition

Styling with CSS in Zend Framework

In the process of creating a website using Zend Framework, I have successfully implemented the header, footer, and all the necessary pages. However, I am facing an issue with integrating the CSS file located at public/css/styles.css. When running the webs ...

phphtmlcsszend-framework

Having trouble parsing the JSON object values within the Error section of the Ajax call

When making an Ajax call to a rest web API, I encountered an error that I need help resolving. Here is the code snippet: $.ajax({ url: "/********/getbytitle('****')/items", type: "POST", contentType: "applicat ...

javascriptjqueryjsonajax

Modifying the appearance of radio buttons using jQuery

I'm new to jQuery and I'm finding it challenging. Currently, I have a set of three radio buttons with the third button already prechecked. My aim is to change the CSS class of the checked button, making it similar to an unchecked button with the ...

javascriptjquerybootstrap-4radio-button

Angular auto suggest feature

I am working with a dropdown in Angular that contains JSON data. The data is stored in a List named options and I need to display the name field in the dropdown list. My current task involves implementing an autocomplete search feature for this dropdown. ...

htmlangulartypescriptautocompleteangular-material

Vue data will remain inaccessible until the JSON.stringify() function is executed

Dealing with this problem is tricky for me as it involves complex behavior that I haven't encountered before in JavaScript or Vue.js. I aim to simplify the code to focus on the most crucial aspects. I utilize vue-class-component (6.3.2) to define my ...

javascriptvue.jsvue-class-components

Can you tell me which CSS property is used to display the ellipsis (...) when there is overflow in the x

When the content exceeds the parent's width, the property overflow-x displays a scrollbar. However, I would prefer to show three dots "..." instead of the scrollbar. Is there a way to do this? ...

css

Error 400 encountered when trying to access National Weather Service data

Encountering a 400 error when making a simple NWS GET request for a point JSON dataset. The issue seems to be with the jQuery process, which is adding extra text after the longitude value in the URL - https://api.weather.gov/points/39.5,-105.5?_=16303483 ...

jqueryjsonajax

There are encountered issues with the `POST` value not functioning properly on certain pages

Form submission was done using script: window.document.form_id.submit(); After redirecting to the action link, unable to retrieve value using $_post['name'] This functionality works fine on local environment but not on the server. ...

javascriptphp

Node.js Error: The requested URL cannot be found

I have encountered an issue in my Node project where I am getting a 'Cannot GET/' error when trying to open localhost on port 8081. I suspect that the problem lies in correctly reading the HTML file, but I'm not entirely sure. var express = ...

javascriptnode.jsexpress

In my upcoming app, I incorporated a tradingview widget that occasionally experiences a glitch. Specifically, when navigating away from and back to the widget, the chart disappears. However, a simple refresh corrects the

Below is the code snippet for embedding a tradingview chart. The script loads the imported tradingview function on page load, and I've included a function to reload the dashboard programmatically onClick event. import Script from "next/script&quo ...

javascriptnode.jsreactjsnext.jsfetch