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-gfvrobfs-bg.html" target="_blank" title="Zamiennik dla równoległego plyr z doMC"> Zamiennik dla równoległego plyr z doMC </a> </li> <li class="side_article_list_item"> 2. <a href="http://pl.uwenku.com/question/p-plwbqqia-b.html" target="_blank" title="pybind11: jak spakować kod C++ i python do pojedynczej paczki?"> pybind11: jak spakować kod C++ i python do pojedynczej paczki? </a> </li> <li class="side_article_list_item"> 3. <a href="http://pl.uwenku.com/question/p-nssumkmo-bq.html" target="_blank" title="Angular - prześlij plik jako base64"> Angular - prześlij plik jako base64 </a> </li> <li class="side_article_list_item"> 4. <a href="http://pl.uwenku.com/question/p-nbweyptz-y.html" target="_blank" title="Spłaszczyć listę rekursywną"> Spłaszczyć listę rekursywną </a> </li> <li class="side_article_list_item"> 5. <a href="http://pl.uwenku.com/question/p-shnhbwci-e.html" target="_blank" title="Proszę skopiować kod, przejść do aplikacji i wkleić tam, ale gdzie?"> Proszę skopiować kod, przejść do aplikacji i wkleić tam, ale gdzie? </a> </li> <li class="side_article_list_item"> 6. <a href="http://pl.uwenku.com/question/p-wwyidsci-be.html" target="_blank" title="Jak wyjaśnić "git pull --rebase" w prostych słowach?"> Jak wyjaśnić "git pull --rebase" w prostych słowach? </a> </li> <li class="side_article_list_item"> 7. <a href="http://pl.uwenku.com/question/p-vsonaqjr-r.html" target="_blank" title="Czy mogę użyć wyniku przechwytywania operatora C++ 17 bez operatora lambda constexpr jako argumentu wskaźnika szablonu typu non-type?"> Czy mogę użyć wyniku przechwytywania operatora C++ 17 bez operatora lambda constexpr jako argumentu wskaźnika szablonu typu non-type? </a> </li> <li class="side_article_list_item"> 8. <a href="http://pl.uwenku.com/question/p-vhmyrxwo-bq.html" target="_blank" title="Vectorized SVM gradientu"> Vectorized SVM gradientu </a> </li> <li class="side_article_list_item"> 9. <a href="http://pl.uwenku.com/question/p-volsqeql-bd.html" target="_blank" title="Scala seq - przyjmować tylko elementów tego samego podtypu"> Scala seq - przyjmować tylko elementów tego samego podtypu </a> </li> <li class="side_article_list_item"> 10. <a href="http://pl.uwenku.com/question/p-nqbseqht-bo.html" target="_blank" title="Dlaczego te zapytania zwracają różne wyniki?"> Dlaczego te zapytania zwracają różne wyniki? </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