рдкрд╛рда рдЗрдирдкреБрдЯ рдлрд╝реАрд▓реНрдб рдХреЛ рдЧрддрд┐рд╢реАрд▓ рд░реВрдк рд╕реЗ рдмрджрд▓рдирд╛ред рдХреНрдпрд╛ рдпрд╣ рд╕рдВрднрд╡ рд╣реИ?

рдЙрджреНрджреЗрд╢реНрдп:
рдлрд╝реЙрд░реНрдо рдкрд░ рдЯрд┐рдкреНрдкрдгрд┐рдпреЛрдВ (textarea) рдХреЗ рд▓рд┐рдП рдПрдХ рдЗрдирдкреБрдЯ рдлрд╝реАрд▓реНрдб рдмрдирд╛рдПрдВ рддрд╛рдХрд┐ рдкрд╛рда рдХреА рд╕рдВрдЦреНрдпрд╛ (рд░реЗрдЦрд╛рдУрдВ) рдХреЗ рдЕрдиреБрд╕рд╛рд░ рдЗрд╕рдХрд╛ рдЖрдХрд╛рд░ (рдКрдБрдЪрд╛рдИ) рдмрджрд▓ рдЬрд╛рдПред
рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдПрдХ рдкрдВрдХреНрддрд┐ рдореЗрдВ рджреЛ рд╢рдмреНрджреЛрдВ рдХреЛ рджрд░реНрдЬ рдХрд░ рд╕рдХрддрд╛ рд╣реИ рдпрд╛ рдПрдХреНрд╕реЗрд▓ рд╕реЗ рдмреАрд╕ рдлреАрдЯ рдКрдВрдЪреА рдПрдХ рдкреНрд▓реЗрдЯ рдбрд╛рд▓ рд╕рдХрддрд╛ рд╣реИ - рдЗрдирдкреБрдЯ рдлрд╝реАрд▓реНрдб рдХреЛ рд╕реНрд╡рдЪрд╛рд▓рд┐рдд рд░реВрдк рд╕реЗ рдмрдврд╝рд╛рдирд╛ / рдШрдЯрд╛рдирд╛ рдЪрд╛рд╣рд┐рдПред
рд▓рд╛рдЗрдиреЛрдВ рдХреА рд▓рдВрдмрд╛рдИ рдЕрд▓рдЧ рд╣реИ (рдЖрдХрд╛рд░ рд░рдмрд░ рд╣реИ рдФрд░ рдмреНрд░рд╛рдЙрдЬрд╝рд░ рд╡рд┐рдВрдбреЛ рдХреЗ рдЖрдХрд╛рд░ рдкрд░ рдирд┐рд░реНрднрд░ рдХрд░рддрд╛ рд╣реИ), рд▓рд╛рдЗрдиреЛрдВ рдХреЛ \ r \ n рджреЛрдиреЛрдВ рдореЗрдВ рд▓рдкреЗрдЯрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ рдФрд░ рдмрд╕ рдЕрдЧрд░ рд╡реЗ рдЪреМрдбрд╝рд╛рдИ рдореЗрдВ рдлрд┐рдЯ рдирд╣реАрдВ рд╣реЛрддреЗ рд╣реИрдВред
рд╕рд┐рджреНрдзрд╛рдВрдд рд░реВрдк рдореЗрдВ, рдЖрдкрдХреЛ textarea рдХреА рдкрдВрдХреНрддрд┐рдпреЛрдВ рдХреА рд╡рд┐рд╢реЗрд╖рддрд╛ рдХреЛ рдмрджрд▓рдиреЗ рдХреЗ рд▓рд┐рдП рдкрд╛рда рдХреА рдкрдВрдХреНрддрд┐рдпреЛрдВ рдХреА рд╕рдВрдЦреНрдпрд╛ рдХреА рдЧрдгрдирд╛ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ рд╕реВрддреНрд░ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрддреА рд╣реИред

рдЬрд╛рд╡рд╛рд╕реНрдХреНрд░рд┐рдкреНрдЯ рдХрд╛ рд╕реНрд╡рд╛рдЧрдд рд╣реИред рдпрджрд┐ рд╕рдорд╛рдзрд╛рди рдХреЗрд╡рд▓ html / css рдХреЗ рд╕рд╛рде рд╕рдВрднрд╡ рд╣реИ, рддреЛ рдФрд░ рднреА рдмреЗрд╣рддрд░ред

рд╕рдорд╛рдзрд╛рди:
IE рдХреЗ рд▓рд┐рдП, рдПрдХ рд╢рд╛рдирджрд╛рд░ рд╕рдорд╛рдзрд╛рди kosiasik рджреНрд╡рд╛рд░рд╛ рд╕реБрдЭрд╛рдпрд╛ рдЧрдпрд╛ рд╣реИ :
Textarea рд╢реИрд▓реА рдореЗрдВ, рдЕрддрд┐рдкреНрд░рд╡рд╛рд╣ рд▓рд┐рдЦреЗрдВ: рджреГрд╢реНрдпрдорд╛рди

рдПрдХ рд╕рд╛рд░реНрд╡рднреМрдорд┐рдХ рд╕рдорд╛рдзрд╛рди drJonnie рдХрд╛ рд╕реБрдЭрд╛рд╡ рджрд┐рдпрд╛:
textarea рдкрд┐рдХреНрд╕рд▓ рдореЗрдВ рдКрдБрдЪрд╛рдИ рд╕реЗрдЯ рдХрд░рддрд╛ рд╣реИ рдФрд░ рдХрд┐рд╕реА рднреА рдХреБрдВрдЬреА (рдорд╛рдЙрд╕ рд╕рд╣рд┐рдд) рдХреЛ рджрдмрд╛рдиреЗ рдкрд░ рдПрдХ рдИрд╡реЗрдВрдЯ рдХреЛ рд▓рдЯрдХрд╛ рджреЗрддрд╛ рд╣реИред рдпрд╣ рдШрдЯрдирд╛ рд╣рд░ рдмрд╛рд░ рд╕реНрдХреНрд░реЙрд▓рд╣рд╛рдЗрдЯ рдФрд░ рдХреНрд▓рд╛рдЗрдВрдЯрд╣рд╛рдЗрдЯ рдХреА рддреБрд▓рдирд╛ рдХрд░рддреА рд╣реИ, рдпрджрд┐ рдкрд╣рд▓рд╛ рдмрдбрд╝рд╛ рд╣реИ, рддреЛ рдЯреЗрдХреНрд╕рдЯрд╛рд░рд┐рдпрд╛ рдХреА рдКрдВрдЪрд╛рдИ рдЕрдкрдбреЗрдЯ рдХреА рдЬрд╛рддреА рд╣реИред

рдореИрдВрдиреЗ рдЗрд╕ рд╕рдорд╛рдзрд╛рди рдХреЛ рд▓рдЧрднрдЧ рд▓рд╛рдЧреВ рдХрд░ рджрд┐рдпрд╛ рд╣реИ:
  рдлрд╝рдВрдХреНрд╢рди рд╕рдорд╛рдпреЛрдЬрдирд╣рд╛рдЗрдЯ (textarea) {
     var dif = textarea.scrollHeight - textarea.clientHeight
     рдЕрдЧрд░ (рдЕрдВрддрд░) {
         рдЕрдЧрд░ (isNaN (parseInt (textarea.style.height))) {
             textarea.style.height = textarea.scrollHeight + "px"
         } {
             textarea.style.height = parseInt (textarea.style.height) + dif + px8
         }
     }
 } 
рдпрд╣ рдкрд╕рдВрдж рдХреЗ рдЖрдзрд╛рд░ рдкрд░ onFocus, onBlur, onKeyPress, рдЖрджрд┐ рдХреА рдШрдЯрдирд╛рдУрдВ рдкрд░ рд▓рдЯрдХрд╛ рд░рд╣рддрд╛ рд╣реИ
drJonnie рдиреЗ рдЯрд┐рдкреНрдкрдгреА рдореЗрдВ рдЕрдкрдиреЗ рдирд┐рд░реНрдгрдп рдХрд╛ рдЙрд▓реНрд▓реЗрдЦ рдХрд┐рдпрд╛
lahmatiy jQuery ( рдЙрдкрдпреЛрдЧ рдЙрджрд╛рд╣рд░рдг ) рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдПрдХ рд╕рдорд╛рдзрд╛рди рд▓рд╛рдпрд╛ , рд▓реЗрдХрд┐рди рдореИрдВ рдПрдХ рдлрд╝рдВрдХреНрд╢рди рдХреЗ рд▓рд┐рдП рдкреВрд░реЗ рдврд╛рдВрдЪреЗ рдХреЛ рдХрдиреЗрдХреНрдЯ рдирд╣реАрдВ рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рдерд╛
рдореИрдВ рдЪрд░реНрдЪрд╛ рдореЗрдВ рд╕рднреА рдкреНрд░рддрд┐рднрд╛рдЧрд┐рдпреЛрдВ рдХрд╛ рдзрдиреНрдпрд╡рд╛рдж рдХрд░рддрд╛ рд╣реВрдВред


Source: https://habr.com/ru/post/In21905/


All Articles