Întrebări legate de zona automată de creștere a textului - Întârzierea expansiunii și a problemelor de umplere

Am implementat un plug-in standard jQuery auto crescând/extind pluginul textarea în iPhone-ul aplicației mele web . Funcționează bine, cu excepția a două aspecte (enumerate mai jos) . În primul rând, permiteți-mi să subliniez că am încercat să-mi dau seama și experimentat cu un tutorial diferit și am ajuns la concluzia că aceasta este cea mai bună pentru nevoile mele.

Issue 1. Delaying expansion of textarea onKeyUp. How? The function expand is called on keyup:

 $(this).keyup(update);

Deoarece folosesc animația CSS3 (-webkit-transition) pentru a anima extinderea și deoarece site-ul/"app" este construit pentru iPhone, trebuie să amâne această acțiune prin a spune 500 ms astfel încât tastarea să nu fie întârziată din cauza asta. Am incercat diferite solutii ca setTimeOut in diferite parti ale codului, chiar Delay, etc dar nu functioneaza. perioadă.

Problema 2: Îmbrăcarea în textarea determină o extindere oarecum aleatorie și de două ori mai mare decât ar fi trebuit.

 padding:10px 10px;

Este o problemă cunoscută - știu, dar până acum se pare că știți că cineva și-a dat încă seama cum să se ocupe de ea în mod corespunzător. Înlăturarea plăcuțelor face ca totul să funcționeze bine. Fără a-mi sugera să folosesc un alt plugin sau pur și simplu pentru a elimina umplutura, cum poate modifica codul pentru a face să lucreze cu padding?

Codul JS realizează extinderea:

 (function($) {

/*
 * Auto-growing textareas; technique ripped from Facebook
 */
$.fn.autogrow = function(options) {

    this.filter('textarea').each(function() {

        var $this       = $(this),
            minHeight   = $this.height(),
            lineHeight  = $this.css('lineHeight');

        var shadow = $('<div></div>').css({
            position:   'absolute',
            top:        -10000,
            left:       -10000,
            width:      $(this).width(),
            fontSize:   $this.css('fontSize'),
            fontFamily: $this.css('fontFamily'),
            lineHeight: $this.css('lineHeight'),
            resize:     'none'
        }).appendTo(document.body);

        var update = function() {

            var val = this.value.replace(//g, '>')
                                .replace(/&/g, '&')
                                .replace(/\n/g, '
'); shadow.html(val); $(this).css('height', Math.max(shadow.height() + 15, minHeight)); $("#guestInfoNameLable").css('height', Math.max(shadow.height() + 15, minHeight)); } var fix = function() { var val = this.value.replace(//g, '>') .replace(/&/g, '&') .replace(/\n/g, '
'); shadow.html(val); $(this).css('height', minHeight); $("#guestInfoNameLable").css('height', minHeight); } $(this).keyup(update); $(this).change(fix); //$(this).change(update).keyup(update).keydown(update); update.apply(this); }); return this; } })(jQuery);

Formular HTML:

 <div class="guestInfoLabel" id="guestInfoNameLable">guest</div>
 


0

1 răspunsuri

I ended up writing my own "plugin" - in 10 lines! *Here's for everyone searching for a simple, lightweight plugin that works with element padding and most input types. It may not be flawless but it sure works.

How it works: OnKeyUp, function getInputStr is called which sets a time out and calls the function handling the expantion: expandElement. This function counts the number of \n, line breaks that is, and expands/contracts the textarea with 20 px for each line break. If the textarea contains more than 8 line breaks, it stops expanding (maxHeight.) I've added CSS3 animation on the textArea to make the expansion run more smoothly, but that is of course entirely optional. Here's code for that:

  -webkit-transition: height 0.6s;
  -webkit-transition-timing-function: height 0.6s;

Part 1: the textarea (HTML)

  


Part 2 (optional): Set time out - to avoid textarea to expand while still typing. (Javascript)

//global variables
var timerActivated = false;
var timeOutVariable = "";

function getInputStr(typedStr) {

//call auto expand on delay (350 ms)

if(timerActivated){
    clearTimeout(timeOutVariable);
    //call textarea expand function only if input contains line break
    if((typedStr.indexOf("\n") != -1)) {
        timeOutVariable=setTimeout(function() { expandTxtArea(typedStr); },350);
    }
}
else {
    if((typedStr.indexOf("\n") != -1)) {
        timeOutVariable=setTimeout(function() { expandTxtArea(typedStr); },350);
        timerActivated = true;
    }
}
//auto grow txtArea 
}

Part 3: Expand text area (Javascript)

function expandTxtArea(typedStr) {
var nrOfBrs = (typedStr.split("\n").length - 1);
var txtArea = $("#guestInfoName");
var label = $("#guestInfoNameLable");
var newHeight = (20 * (nrOfBrs+1));

//console.log("nr of line breaks: " + nrOfBrs); console.log("new height: " + newHeight);

//setting maxheight to 8 BRs
if(nrOfBrs < 9) {
    txtArea.css("height", newHeight); 
    label.css("height",newHeight);
} else {
    txtArea.css("height", 180); 
    label.css("height",180);
}

}

Asta e tot. Sper că acest lucru îi ajută pe cineva cu o problemă similară!

0
adăugat
JavaScript, România - Moldova
JavaScript, România - Moldova
328 participanți

Comunitatea Română JavaScript: github.com/js-ro Pentru confort, opriți notificările. Parteneri: @node_ro, @php_ro, @python_ro, @seo_ro, @RomaniaGroup, @ai_ro, @Grupuri_IT Offtop: @holywars_ro Joburi: @js_jobs_ro Sponsored with ❤️ by ciupacabra.com