Question

我试图弄清楚如何更改下面的字体系列，并仍然触发适合给定宽度文本的事件。当我输入一个长字符串时，然后更改字体系列...新字体系列的字符扩展到该区域之外。见所附图片。

此代码使用inputfit.js，它通过在添加新文本时增加/减小字体大小来使文本适合特定区域。除非键入up或按下keydown，否则克隆字体系列不会更改，字体大小也不会更改。我已经在这里呆了几个小时了，我似乎无法使它正常工作。任何帮助将不胜感激。

// http://vadim.sikora.name/jquery.inputfit.js
// jquery.inputfit.js with modifications
// global define:true
(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['jquery'], factory);
    } else {
        // Browser globals
        factory(jQuery);
    }
}
(function ($) {
    $.fn.inputfit = function(options) {
        var settings = $.extend({
            minSize   : 10,
            maxSize   : 150,
        }, options);
        this.each(function() {
            var $input = $(this);
            if ( !$input.is(':input') ) {
                return;
            }
            $input.off('keyup.inputfit keydown.inputfit');
            var maxSize = parseFloat(settings.maxSize || $input.css('font-size'), 10);
            var width   = $input.width();
            var clone   = $input.data('inputfit-clone'); // why do I need clone?
            if (!clone) {
                clone = $('<div></div>', {
                    css : {
                        fontSize     : $input.css('font-size'),
                        fontFamily   : $input.css('font-family'),
                        fontStyle    : $input.css('font-style'),
                        fontWeight   : $input.css('font-weight'),
                        fontVariant  : $input.css('font-variant'),
                        letterSpacing: $input.css('letter-spacing'),
                        whiteSpace   : 'pre', // counts the spaces on the ends, use to be 'nowrap' *modification*
                        position     : 'absolute',
                        left         : '-9999px',
                        visibility   : 'hidden'
                    }
                }).insertAfter($input);
                $input.data('inputfit-clone', clone);
            }

            // how do I make text fit after font family changes?? clone font family not changing
            // clone.css('font-family', $input.css('font-family')); ????

            $input.on('keyup.inputfit keydown.inputfit', function() {
                var $this = $(this);
                clone.text($this.val());
                var ratio = width / (clone.width() || 1),
                currentFontSize = parseInt( $this.css('font-size'), 10 ),
                fontSize = Math.floor(currentFontSize * ratio);
                if (fontSize > maxSize) {
                	fontSize = maxSize;
                }
                if (fontSize < settings.minSize) {
                	fontSize = settings.minSize;
                }
                $this.css('font-size', fontSize);
                clone.css('font-size', fontSize);
            }).triggerHandler('keyup.inputfit');
        });
        return this;
    };
}));

$(document).ready(function(){
    $('#input').inputfit();
    $(window).resize(function(){
        $('#input').inputfit();
    });
});
$(function () {
    $('select[name="font"]').on('change', function () {
        $('input[name="input"]').css('font-family', this.value);
    });
    $('select[name="color"]').on('change', function () {
        $('input[name="input"]').css('color', this.value);
    });
});

body {
	overflow-x: hidden;
	overflow-y: auto;
}
input:focus {
	outline: none;
}	
section {
	text-align: center;
}
input {
	width: 100%;
    height: 300px;
    text-align: center;
    border-width: 0;
    font-family: "Berkshire Swash";
    color: #00000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	    <title>jquery.inputfit.js</title>
	    <link href="https://fonts.googleapis.com/css?family=Arimo|Berkshire+Swash|Fredoka+One|Pacifico" rel="stylesheet">
	</head>
	<body>
	    <input id="input" name="input" value="Type Here" type="text" maxlength="100" spellcheck="false">
	    <section>
	    	<select name="font">
	    		<option value="Berkshire Swash">Berkshire Swash</option>
			    <option value="Pacifico">Pacifico</option>
			    <option value="Fredoka One">Fredoka One</option>
			    <option value="Arimo">Arimo</option>
			</select>
			<select name="color">
				<option value="#000000">black</option>
	    		<option value="#0000ff">blue</option>
	    		<option value="#ff0000">red</option>
	    		<option value="#ffff00">yellow</option>
			</select>
	    </section>
	</body>
</html>

Answer 1

您可以通过“触发”键盘来实现。通过触发键盘输入，将运行inputfit。

    $('select[name="font"]').on('change', function () {
            $('input[name="input"]').css('font-family', this.value);
            $("#input").trigger("keyup");
    });

当用户为文本输入选择字体系列时，如何触发事件？

1 个答案: