Implementing input overflow scroll feature on iOS Safari version 8

Encountering an issue with form fields on mobile Safari, version 8.1 that seems to be persisting across all versions of Safari 8 on mobile devices.

Typing text into an input field longer than the visible width causes the cursor to move right as expected. However, the problem arises when attempting to select and scroll left to view hidden text - scrolling is not possible. Similarly, selecting outside the input prevents scrolling right to access the concealed text.

The only available option is to select all and delete the contents.

Is there a workaround for this issue? A sample page showcasing different input types with the same behavior has been uploaded.

Fiddle: http://jsfiddle.net/b7kmxaL6/ (To replicate in mobile safari)

<form action="">
    <fieldset>
        <input type="text" class="text">
        <input type="email" class="email">
        <input type="password" class="password">
    </fieldset>
</form>

htmlioscsssafarimobile-safari

Answer №1

Below is a snippet of code that can be quite useful in certain situations. Sometimes selecting text may not function as expected, especially when the selected area is larger than the input field itself. This code has been successfully tested on an iPad running iOS 10.2 using both Safari and Chrome browsers.

var interval;

$('#inputid').focus(function() {
        var el = this, ratio = el.scrollWidth / el.value.length;
        var inputwidthinchar = $(el).width() / ratio;

        clearInterval(interval);
        interval = setInterval(function(){
                var x = el.selectionStart, x2 = el.selectionEnd, width = $(el).width();
                if ( (width + 1) > el.scrollWidth) return;
                var curposS = x - el.scrollLeft / ratio,
                    curposE = x2 - el.scrollLeft / ratio,
                    tenper = inputwidthinchar * .1;
                if (curposS > tenper && curposE < (inputwidthinchar - tenper) ) return; // only if at edges;
                if (curposS < tenper && curposE > (inputwidthinchar - tenper) ) return; // if at both edges, don't do anything;
                //center text - good for tapping on spot to be centered
                //$(el).scrollLeft(x * ratio - (width/2));

                //scroll two char at a time - good for touch and hold at edge and more like expected function
                if (curposS < tenper)
                        $(el).scrollLeft(el.scrollLeft - ratio * 2);
                else
                        $(el).scrollLeft(el.scrollLeft + ratio * 2);

                el.setSelectionRange(x, x2); //not working so well.
        },100);
}).blur(function(){
        clearInterval(interval);
});

Answer №2

While developing a mobile-friendly web application, I encountered a similar issue.

Interestingly, if the user adds the website to their homescreen and accesses it with the meta tag 

<meta name="apple-mobile-web-app-capable" content="yes">
included in the head section, the problem is resolved: now the input text can be scrolled by moving the caret left or right at the input field's edge.

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

Adjusting the Size of a Static Banner

I have a quick question. I've been trying to create a fixed banner that will scale when the page is resized, but I'm having some trouble with the phrasing in Google search. My issue is that when using a percentage width for the large container, t ...

javascripthtmlcsswebmeteor

How to Conceal Axis Label in an HTML5 Canvas Line Chart

Is there a way to hide the x-axis label from a line chart without hiding the y-axis label as well? I tried using scaleFontSize: 0,, but that ended up hiding both axis labels. I only want to hide the x-axis label. var lineOptions = { ///Boo ...

javascripthtmlchartshtml5-canvaslinechart

The styling in Laravel Bootstrap does not appear to be functioning properly when the "public" portion is removed from the URL. However, adding "Public" back into

Primary View file When the URL is made public Upon exclusion of "public" from the URL the Bootstrap file can be found in public under Bootstrap/css/bootstrap.css ...

phpcsslaravelbootstrap-4frontend

Creating a fixed column in an Angular Material Table for enhanced user experience

Has anyone found a method to implement a sticky first column in Angular Material using CSS? Check out the editable Stackblitz code here. I attempted to modify this approach from https://jsfiddle.net/zinoui/BmLpV/, but encountered issues where the first c ...

cssangularangular-material-5

Which CSS property is utilized to position the parent level of a menu below the children when they are shown on the screen?

Recently, my Drupal superfish menu has been acting up after updating the module. The issue I encountered was that the children no longer appear above their parent items. Can anyone help me figure out which setting dictates the order in which they are dis ...

css

Animating elements with folding effects using CSS transforms

Check out this square: https://jsfiddle.net/34f93mL3/ If you hover over it, you'll see that the top folds down and turns into a pink polka-dotted pattern when it reaches the bottom. However, my goal is to make it look more like an actual folding mot ...

htmlcssanimationtransform

Compress a CSS file with PHP

When using the code below to remove all newlines and spaces from a CSS file, it may cause an issue if the file contains the following: .sample { padding: 0px 2px 1px 4px; } The output will be: .sample{padding:0px2px1px4px;} However, I actually want ...

phphtmlcssregexminify

The updateItem function in the JSGrid controller was not called

Currently, I am working on a project involving js-grid. However, I have encountered an issue where the updateitem function of the controller is not being invoked when attempting to update a column field. Additionally, the field resets to its old value wi ...

javascripthtmlajaxjsgrid

"Deleting a line from a text file in PHP with a predetermined format: A step-by-step guide

I am facing a situation where I need to manipulate a CSS file through PHP. The CSS file contains the following properties: #firstdiv { width:100%; height:200px; } #seconddiv { width:80%; height:70px; } #thirddiv { width:80%; height:70px; } #firstdiv { col ...

phpcssfile-put-contents

How can JavaScript onClick function receive both the name and value?

My current challenge involves a function designed to disable a group of checkboxes if they are not checked. Originally, this function was set to work onClick(), with one argument being passed from the checkbox element. Now, I need this function to be trigg ...

javascripthtmlcheckboxcoldfusion-9

The CSS file is displaying a repeating background image

While developing my mvc4 application, I encountered an issue with setting the background in layout.cshtml. Despite adding the background-repeat:no-repeat tag, my background image continues to repeat. I have searched extensively online and tried various sug ...

htmlcssasp.net

What is the main purpose of using the CSS transform:translate() property?

When CSS3 introduced animations with transition properties, it gave developers two main ways to change the position of an element. The first method involves setting the element's position as absolute and adjusting the left, right, top, and bottom prop ...

htmlcsstransition

The bottom section of the main page

I've successfully implemented a footer that sticks to the bottom of each page as intended. However, I'm facing an issue when there's a large amount of text on a particular page that requires scrolling. The scroll continues beyond the footer, ...

htmlcssasp.netmaster-pagessticky-footer

There are various reasons why React components do not utilize explicitly defined styles

I've encountered a puzzling issue while working on a React component that includes other components. Despite specifying styles in the parent component for its children, the specified styles are not being applied. Strangely enough, when I enclose the c ...

javascripthtmlcssreactjs

jquery has a strange behavior where the dialog window will cover up the scrollbar when the main

Currently, I am utilizing jQuery dialog to display a dialog window. I have managed to position it at the bottom left corner as desired. However, when the main window contains a scrollbar, the dialog ends up overlapping with the scrollbar instead of alignin ...

javascriptjquerycssjquery-uijquery-ui-dialog

Exclusive Hover Effect: Applying Hover Styles Only to Child Elements, Independent from Parent Hover

Styling with components is a great way to enhance your web design. const box = style.div` background-color: blue height: 300px ` const image = style.img` filter: grayscale(50%) ` <box> <image /> </box> If <image> stands alo ...

cssstyled-components

Tips for aligning the title to the left of text within a Bootstrap 4 card component

I have a situation where I need to adjust the layout of a card item in Bootstrap 4. Specifically, I want to move the title to the left of the text for screens that are not mobile. Is there a way to achieve this? Thank you! <div class="card flex-row fle ...

cssbootstrap-4

Is it possible to locate both the child and parent elements by their class names simultaneously using WebDriver?

When conducting a search on eBay that returns more than 50 listings, such as this example, the site displays the results in either grid or list format. Using the WebDriver tool, I am extracting prices by their class name: https://i.stack.imgur.com/dGNzw. ...

pythonhtmlcssseleniumselenium-webdriver

Modification in background when PNG image is hovered upon

Having an issue in Chrome that doesn't occur in Firefox. When hovering over a PNG within a carousel plugin or dragging an element with Jquery, the hover image briefly distorts the background. Looking for a solution to improve user experience. Let me k ...

cssgoogle-chromehoverpng

When would it be advantageous to select sender: Any while setting up an @IBAction in Swift programming?

When using IB/storyboards in Xcode to create an IBAction linking an interface object (like a button) with a method in the code file, the sender type is automatically set to Any by default. Even though Xcode should already know the type of control being us ...

iosswiftxcodeinterface-builder