Dlaczego JavaScript tylko oblicza liczbę znaków powrotu karetki jako jeden znak, gdy jest dwa?

Z nieznanych przyczyn, jQuery zawsze konwertuje wszystkie znaki nowej linii w wartość <textarea> do pojedynczego znaku. Oznacza to, że jeśli przeglądarka przyznaje mu \r\n dla nowej linii, jQuery upewnia się, że jest to tylko \n w zwracanej wartości .val(). (W rzeczywistości przyczyna prawdopodobnie nie jest "nieznana" - prawdopodobnie normalizuje wyniki w różnych przeglądarkach, ponieważ IE zgłasza, że znaki nowej linii mają długość 2 znaków.)

Chrome i Firefox obliczają długość tagów <textarea> w ten sam sposób dla w celach "maksymalnej długości".

Jednak specyfikacja HTTP twierdzi, że nowe znaki są reprezentowane jako \r\n. Tak więc, jQuery, webkit i Firefox wszystko to źle. Kiedy pole zostanie opublikowane, webkit i Firefox poprawnie dodają nowe linie!

Efekt jest taki, że "maksymalna długość" na znacznikach <textarea> jest praktycznie bezużyteczna, jeśli kod po stronie serwera rzeczywiście ma ustalony maksymalny rozmiar dla wartości pola.

Edytuj To nadal jest problem w 2015 roku - przynajmniej w Chrome 45.0.2454 i IE 11.0.9600.

Źródło

2012-04-05 15:07:55 Pointy

"Wynik jest to, że "maksymalna długość" na tagach jest prawie bezużyteczna, jeśli twój kod po stronie serwera ma naprawdę ustalony maksymalny rozmiar dla wartości pola. " Jestem zmieszany. Wydaje mi się, że mówisz, że jQuery zgłasza znaki nowej linii jako pojedynczy znak, ale przeglądarka poprawnie używa dwóch znaków. Jeśli tak jest, czy atrybut 'maxlength' rzeczywiście nie działałby poprawnie i nie liczą newlines jako dwóch znaków, w jaki sposób dane będą zapisywane w backendach? – <span class="text-secondary"> <small> <span></span> </small> </span> </p> </div> </div> </div> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+1</span></div> <div class="col-lg-11"> <p class="commenttext">@wired_in nie, ponieważ opiekunowie przeglądarki to dziwni ludzie i nie rozumieją całego punktu "maksymalnej długości" (moja osobista opinia). Zarejestrowałem błędy w Firefoksie i WebKit, a ilość dziwacznych, niedoinformowanych zwrotów, które dostałem, jest niesamowita. Implementacje 'maxlength' sprawdzają długość zwróconą przez' .value', co oznacza długość * bez * znaków CR, które są wprowadzane po opublikowaniu formularza. Przeniosłem się i pozostanę przy moim rozwiązaniu JavaScript. – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/182668/">Pointy</a></span> <span></span> </small> </span> </p> </div> </div> </div> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+1</span></div> <div class="col-lg-11"> <p class="commenttext">"Implementacje' maxlength' sprawdzają długość zwróconą przez '.value', czyli długość bez znaków CR" - Jest odwrotnie. 'maxlength' zlicza CR + LF (którego JavaScript nie obsługuje) - co zademonstrowano w powyższym jsfiddle iw połączonym pytaniu. Tak więc, 'maxlength' jest rzeczywiście poprawna w odniesieniu do kodu po stronie serwera, jest to tylko" problem ", jeśli przetwarzasz to również za pomocą JavaScript po stronie klienta. – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/369434/">MrWhite</a></span> <span></span> </small> </span> </p> </div> </div> </div> </div> </div> </article> <div> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="1038284119" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="clearfix"> </div> <div> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-6208739752673518" data-ad-slot="1575177025"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="padding-top-10"></div> </div> </div> <script type="text/javascript" src="http://img.uwenku.com/uwenku/script/side.js?t=1644592048877"></script> <script type="text/javascript" src="http://img.uwenku.com/uwenku/plugin/highlight/highlight.pack.js"></script> <link href="http://img.uwenku.com/uwenku/plugin/highlight/styles/docco.css" media="screen" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $('pre').each(function(i, e) { hljs.highlightBlock(e, "<span class='indent'> </span>", false) }); </script> <div class="col-lg-3 col-md-4 col-sm-5"> <div id="rightTop"> <div class="row"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="5415218910" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="row sidebar panel panel-default"> <div class="panel-heading font-bold"> Ostatnie pytanie </div> <div class="m-b-sm m-t-sm clearfix"> <ul class="side_article_list"> <li class="side_article_list_item"> 1. <a href="http://pl.uwenku.com/question/p-bhemqjjz-s.html" target="_blank" title="Autouzupełnianie obiektów automatyzacji w kodzie VS i Pythonie"> Autouzupełnianie obiektów automatyzacji w kodzie VS i Pythonie </a> </li> <li class="side_article_list_item"> 2. <a href="http://pl.uwenku.com/question/p-gtezkegt-bk.html" target="_blank" title="jak uzyskać obiektów z tej samej nieruchomości i ma wartość max w tablicy - Javascript"> jak uzyskać obiektów z tej samej nieruchomości i ma wartość max w tablicy - Javascript </a> </li> <li class="side_article_list_item"> 3. <a href="http://pl.uwenku.com/question/p-qzmsyvsr-bh.html" target="_blank" title="Czy ktoś jeszcze ma problem z Java 8 z Androidem 3.0?"> Czy ktoś jeszcze ma problem z Java 8 z Androidem 3.0? </a> </li> <li class="side_article_list_item"> 4. <a href="http://pl.uwenku.com/question/p-hnfudmnc-be.html" target="_blank" title="Kciuk suwaka zakresu danych nie może być przenoszony w przeglądarce Google Chrome"> Kciuk suwaka zakresu danych nie może być przenoszony w przeglądarce Google Chrome </a> </li> <li class="side_article_list_item"> 5. <a href="http://pl.uwenku.com/question/p-fbqugoca-bp.html" target="_blank" title="Jak utworzyć funkcję, która kopiuje i wstawia własny element div?"> Jak utworzyć funkcję, która kopiuje i wstawia własny element div? </a> </li> <li class="side_article_list_item"> 6. <a href="http://pl.uwenku.com/question/p-wjrprpwd-bd.html" target="_blank" title="-1 w indeksie listy w języku C#"> -1 w indeksie listy w języku C# </a> </li> <li class="side_article_list_item"> 7. <a href="http://pl.uwenku.com/question/p-rxutqlgy-d.html" target="_blank" title="Zagnieżdżony błąd ciągu szablonów w NodeJS"> Zagnieżdżony błąd ciągu szablonów w NodeJS </a> </li> <li class="side_article_list_item"> 8. <a href="http://pl.uwenku.com/question/p-bmcrtzxr-bg.html" target="_blank" title="Odbicie java 8 nie działa"> Odbicie java 8 nie działa </a> </li> <li class="side_article_list_item"> 9. <a href="http://pl.uwenku.com/question/p-gnpcybql-bm.html" target="_blank" title="C# i dotnet 4.7.1 nie dodawanie niestandardowego certyfikatu dla wywołań TLS 1.2"> C# i dotnet 4.7.1 nie dodawanie niestandardowego certyfikatu dla wywołań TLS 1.2 </a> </li> <li class="side_article_list_item"> 10. <a href="http://pl.uwenku.com/question/p-fkvgasje-bn.html" target="_blank" title="Łączenie dwóch ramek danych z przerwami działa niepoprawnie?"> Łączenie dwóch ramek danych z przerwami działa niepoprawnie? </a> </li> </ul> </div> </div> </div> <p class="article-nav-bar"></p> <div class="row sidebar article-nav"> <div class="row box_white visible-sm visible-md visible-lg margin-zero"> <div class="top"> <h3 class="title"><i class="glyphicon glyphicon-th-list"></i> Powiązane problemy</h3> </div> <div class="article-relative-content"> <ul class="side_article_list"> <li class="side_article_list_item">Brak powiązanych problemów^_^</li> </ul> </div> </div> </div> </div> </div> </div> </div>  <footer id="footer"> <div class="bg-simple lt"> <div class="container"> <div class="row padder-v m-t"> <div class="col-xs-8"> <ul class="list-inline"> <li><a href="http://pl.uwenku.com/contact">Skontaktuj się z nami</a></li> <li>© 2020 PL.UWENKU.COM</li> <li><a target="_blank" href="https://beian.miit.gov.cn/">沪ICP备13005482号-4</a></li> <li><script type="text/javascript" src="https://v1.cnzz.com/z_stat.php?id=1280101193&web_id=1280101193"></script></li> <li><a href="http://www.uwenku.com/" target="_blank" title="优文库">简体中文</a></li> <li><a href="http://hk.uwenku.com/" target="_blank" title="優文庫">繁體中文</a></li> <li><a href="http://ru.uwenku.com/" target="_blank" title="поле вопросов и ответов">Русский</a></li> <li><a href="http://de.uwenku.com/" target="_blank" title="Frage - und - antwort - Park">Deutsch</a></li> <li><a href="http://es.uwenku.com/" target="_blank" title="Preguntas y respuestas">Español</a></li> <li><a href="http://hi.uwenku.com/" target="_blank" title="कार्यक्रम प्रश्न और उत्तर पार्क">हिन्दी</a></li> <li><a href="http://it.uwenku.com/" target="_blank" title="IL Programma di chiedere Park">Italiano</a></li> <li><a href="http://ja.uwenku.com/" target="_blank" title="プログラム問答園区">日本語</a></li> <li><a href="http://ko.uwenku.com/" target="_blank" title="프로그램 문답 단지">한국어</a></li> <li><a href="http://pl.uwenku.com/" target="_blank" title="program o park">Polski</a></li> <li><a href="http://tr.uwenku.com/" target="_blank" title="Program soru ve cevap parkı">Türkçe</a></li> <li><a href="http://vi.uwenku.com/" target="_blank" title="Đáp ứng viên">Tiếng Việt</a></li> <li><a href="http://fr.uwenku.com/" target="_blank" title="Programme interrogation Park">Française</a></li> </ul> </div> </div> </div> </div> </div> </footer>  <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?f78a970f17b19a79fc477a3378096f29"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>

Dlaczego JavaScript tylko oblicza liczbę znaków powrotu karetki jako jeden znak, gdy jest dwa?

Odpowiedz