Hidden input field when inactive

Whenever I start typing in my input form, the text disappears after a moment. The only way to prevent this is by continuously pressing on a letter key on my keyboard.

This issue began after I added a resizeInput attribute that adjusts the size of the input box as I type, causing it to expand with each additional letter entered.

Is there a solution to stop this from happening?

* There seems to be an issue with the jQuery in the jsfiddle link provided, as the resizeInput feature is not functioning properly which eliminates the disappearing text problem. However, the underlying issue remains if you click outside the text box

JS Fiddle: http://jsfiddle.net/bx15jdw0/

HTML 

<input id="message" type="text" placeholder="It's your turn to type....!" required="required">
jqueryhtmlcss

Answer №1

To fix the issue, simply delete the line-height property from the CSS file and add jQuery to your fiddle.

Check out the DEMO for reference.

Answer №2

To fix the issue, remove the line-height property from the CSS code.

For an updated version of the code, check out this fiddle: http://jsfiddle.net/bx15jdw0/3/

Your revised CSS should look like this:

input 
{
    display: block;
    margin: 20px;
    width: auto;
    height: 60px;
    font-size: 50px;
    color: #000000;
    outline:none;
 }

The input is displaying oddly because the line-height is too large. Adjusting it to a smaller value should resolve the issue.

Answer №3

Adjust the line-height to a smaller size

http://example.com/12345

button 
{
display: inline-block;
padding: 10px;
width: auto;
height: 40px;
font-size: 30px;
color: #333333;
background-color: #ffffff;
border:none;
}

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

Overlay a small image on top of a larger background image using canvas, then merge them into a single set of pixel

Is there a way to combine a smaller image with a larger background image on one canvas while allowing the smaller image to move around? I'll need to save the original background pixel data so that each frame can be redrawn with the overlay in its upda ...

javascriptgraphicshtmlcanvaspixel

Expanding HTML Editor's Functionality in Eclipse with Custom Tags

Creating an application involves incorporating custom tags within HTML code, which are processed on the server side before being presented to the end user as valid HTML. An example of using custom tags is shown below: <html> <body> ... < ...

htmleclipsetags

Having trouble debugging a website remotely? Dealing with a JSON problem specifically in IE8

Currently, the website is functioning flawlessly on various machines except for those used by the client in Africa. Unfortunately, I have no way of accessing his specific machine due to geographical constraints. The client has limited IT knowledge, and we ...

htmlajaxjsoninternet-explorer-8

What is a more efficient method for switching between edit mode and view mode in ng-grid?

Up until now, I've only managed to switch the edit mode in ng-grid by using separate templates and showing the correct template based on user input. For example: Plunker (resize a column and then switch to another mode) This poses a problem because ...

javascriptjqueryangularjsng-grid

Double clicking on a row value in a Bootstrap table

Struggling to retrieve the row value after a double click in a bootstrap table. Unfortunately, every attempt returns 'undefined'. Snippet of my code: $('#table').on('dbl-click-row.bs.table', function(field, value, row, $el) ...

javascriptjquerybootstrap-4

Learn the process of utilizing Javascript to substitute additional texts with (...) in your content

I am facing a challenge with a text field that allows users to input text. I want to use JavaScript to retrieve the text from the textbox and display it in a paragraph. However, my issue is that I have set a character limit of 50. If a user exceeds this li ...

javascriptjqueryhtml

Bootstrap - Input fields not following grid constraints

I have scoured the internet for answers to my question and haven't found anything useful, not even in previous posts on this forum. Currently, I am working on a website for internal company use and tinkering with it at home. However, I seem to be fac ...

javascripthtmltwitter-bootstrapbootstrap-4

How can I use AngularJS to initiate code to run after the view and controller have successfully synchronized a specific change?

I am currently using AJAX to load date ranges into a pair of SELECTs (managed with AngularJS ng-repeat), which are then transformed into a slider using jQuery UI's selectToUISlider. My concern is that selectToUISlider may behave unexpectedly if the SE ...

javascriptjqueryangularjs

Adding custom JavaScript files to a React project: A step-by-step guide

Is it possible to include JavaScript files stored in the public folder into React components located in the src component folder of a React create application? ...

jqueryreactjsreactive-programming

using jquery to trap anchor in unordered list items

This section is dedicated to the menu on the website. The code for this menu can be found in the _Layout.cshtml() page. When the 'Neu Gesellschaft' page loads, I want to change the CSS of the anchor tag a. I attempted the following jQuery code: ...

jqueryhtmlcss

The ng-show and ng-hide directives are not working as expected, and there are no error

I'm currently working on a Todo App using AngularJS 1.x (version 1.6), but I'm having issues with ng-show and ng-hide functionality. The aim is to have a text box appear in the todo section when the edit button is clicked to modify existing todos ...

javascriptangularjshtml

Develop a form containing a date input in a special character-free format, along with a validation feature

I am looking to design a form that necessitates users to input a date in the following format: "ddmmyyyy". No slashes, dots, or any other special characters should be included. Only entries matching this specific format will be accepted as valid, any other ...

jqueryhtmlvalidationdateinput

The TextArea element is experiencing issues with the Jquery function

In my asp.net web application, I have implemented a JQuery function to restrict user input characters. $(document).ready(function () { $('input').on('input', function () { var c = this.selectionStart, ...

javascriptc#jqueryasp.net

How do I utilize jQuery to retrieve initials from the name field of a form?

I'm on the hunt for a clever solution to a rather ugly problem. I have a form that accepts a full name as input and passes it to a function. Now, I need to transform that full name into its initials (e.g. 'John Doe' becomes 'JD') b ...

jqueryformsinput

Embedding PHP code within HTML causing functionality issues

I'm attempting to include PHP within CSS, but the outcome is not what I expected. Instead of displaying the desired results, it's showing me the variable names and an echo statement: <!doctype html> <?php require_once("mysqlconnect.php" ...

phphtml

Show identification as an alternative term in the chart

Is there a way to display an id in a table cell as another name from a different object with corresponding ids? I want to achieve something like this if it's possible: <td class="tableRowText"><p>{{l.SenderId}}</p></td> simil ...

htmlangularjs

How to modify the link to ensure that a particular tab is already selected when the page loads

How to Add Script for Linking to Rawdata Tab I need help loading specific page content with the Rawdata tab open instead of the Summary tab. What code should I add to the link to ensure that the page loads with "Rawdata"? https://i.stack.imgur.com/avETs. ...

htmlangularjshyperlinkangular-ui-bootstrap

Error in Ruby on Rails: View cannot locate the path for Collection routes

I have included a collection route with POST method in my routes file. resources: curated_items do collection do post 'duplicate' end end However, I am unable to locate the path for the 'duplicate' prefix in my view.v ...

htmlruby-on-railsrubyruby-on-rails-3ruby-on-rails-4

Fade effect not working with Bootstrap Modal

I am encountering an issue with the Twitter Bootstrap modal while trying to display post details on WordPress. The problem is that when the modal opens, the entire screen turns grey and nothing in the modal is clickable. I can only exit this mode by pressi ...

javascriptjquerycsswordpresstwitter-bootstrap

ReactJS - Element not specified

I'm experiencing a specific issue with the component below related to the changeColor() function, which is triggering an error message: TypeError: Cannot set property 'color' of undefined This error seems to be isolated within this compo ...

javascriptcssreactjs