skip to Main Content

I would like to remove my .textareafooter class when i tap the textarea field in iOS via JS/JQuery.

Explanation:

My .textareafooter is a white DIV right below my container with the textarea which has a bottom-boder-radius nested in a DIV with a black background.

If the keyboard pops in then i’ve got ontop of the keyboard the said footer which looks horrible.

I photoshopped this picture below just quickly to kinda illustrate my problem.

Symbolic Pic

Thank you in advance

2

Answers


  1. try arranging CSS

    textarea:has(:focus) + .textareafooter
    
    
    textareaParent:focus-within .textareafooter
    
    
    aspect-ratio
    

    or JavaScript

    textarea.addEventListener('focus', ...)
    
    
    textarea.addEventListener('blur' ...)
    
    Login or Signup to reply.
  2. You have to first check if the device is an Iphone. You do that by using the Navigator Api. And then remove the class from the textArea.

    let textArea = document.querySelector('.textareafooter')
    
    textArea.addEventListener('focus', () => {
        
        //Check if it is an iphone device
        if (navigator.userAgent.indexOf('iphone') > - 1) {
            
            //Remove the class
            
            textArea.classList.remove('textareafooter')
        }
    })
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search