JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<input type='text' value='2012年現在、国際連合の統計によると、東京は世界最大のメガシティと評価されており、世界最大の人口を有する都市圏を形成している。都市単位の経済規模(GDP)ではニューヨークをしのぎ、世界最大である。' />

CSS

input{
    padding:5px; margin: 20px; width:300px; font-size:20px; 
     border:1px solid #CCC;  
    background-image: linear-gradient(0deg, #1a60a6 100%, transparent 0%);
    background-image: -webkit-linear-gradient(0deg, #1a60a6 100%, transparent 0%);
    background-repeat: no-repeat;
    background-position:0 100px;
    
    transition:200ms;
    -webkit-transition:200ms;
    -o-transition:200ms;
}
/* for ugly chrome */
textarea:focus, input:focus{
    outline: none;
}

/* for centering only */
     input{ display:inline-block; vertical-align:middle; }
     html, body{ height:100%; text-align: center; }
     body:before{content:''; display:inline-block; height:100%; vertical-align:middle; margin-right:-0.25em; }

JavaScript

(function($){
                var defaults = {
                        bgPos : '30px'
                    },
                    canvas = document.createElement('canvas'), // Canvas used to check text widths.
                    context = canvas.getContext('2d'),
                    iCaretPos, caret, totalWidth, cssRules, font, totalTextWidth, currentTextWidth,
                    locationPercentage, textWidthRatio, settings, selectors = [],
                
                    // find in which direction the user has selected the text, left or right
                    getSelectionDirection = {
                        direction : null,
                        lastOffset : null,
                        set : function(e){
                            if( e.shiftKey && e.keyCode == 36 )
                                getSelectionDirection.direction = 'left';
                            else if( e.shiftKey && e.keyCode == 35 )
                                getSelectionDirection.direction = 'right';
                            if( e.type == 'mousedown' )
                                getSelectionDirection.lastOffset = e.clientX;
                            else if( e.type == 'mouseup' ){
                                getSelectionDirection.direction = e.clientX < getSelectionDirection.lastOffset ? 'left' : 'right';
                                //console.log(direction);
                            }
                        }
                    };
                
                function getCaretPosition(oField, direction){    
                    // if IE
                    if( document.selection ){
                        oField.focus();
                        var oSel = document.selection.createRange();
                        oSel.moveStart('character', -oField.value.length);
                        iCaretPos = oSel.text.length;
                    }
                    else if( oField.selectionStart || oField.selectionStart == '0' )
                    ...