คำถามติดแท็ก html

ฉันต้องการรับตำแหน่งข้อความที่เลือกโดยใช้ javascript ตัวอย่างเช่น ฉันมี textarea ง่าย ๆ #input-text { resize: none; width: 50%; height: 50px; margin: 1rem auto; } <textarea id="input-text">I am a student and I want to become a good person</textarea> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล ใน textarea ของฉันฉันมีข้อความเช่น: "I am a student and I want to become a good person" จากสตริงนี้ถ้าฉันเลือก "เป็นคนดี" …

20 javascript  html 

function validate() { var username = document.getElementById("username").value; var password = document.getElementById("password").value; if (username == "") { document.getElementById("message").innerHTML = "USERNAME CANNOT BE EMPTY"; document.getElementById("username").style.borderColor = "red"; return false; } if (password == "") { document.getElementById("message").innerHTML = "PASSWORD CANNOT BE EMPTY"; document.getElementById("password").style.borderColor = "red"; return false; } } #username:focus { background-color: yellow; …

20 javascript  html  css 

เช่นฉันมีสิ่งนี้: <pre> sun<br/>     mercury <br/>     venus <br/>         earth <br/>         mars <br/>             jupiter <br/>     saturn <br/> </pre> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล และนี่: <div style="font-family:monospace"> <div style="text-indent: 0">sun</div> <br/> <div style="text-indent: 4ch">mercury</div> <br/> <div style="text-indent: 4ch">venus</div> <br/> <div style="text-indent: 8ch">earth</div> <br/> <div style="text-indent: 8ch">mars</div> <br/> <div style="text-indent: 12ch">jupiter</div> <br/> <div style="text-indent: 4ch">saturn</div> <br/> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล …

19 html  css  acid3 

ผมมีรายการที่มีoverflow-xและกำหนดให้overflow-y นอกจากนี้ผมได้ตั้งค่าเลื่อนโมเมนตัมเพื่อเลื่อนสัมผัสการทำงานมีความสุขในมือถือใช้autowebkit-overflow-scrolling: true อย่างไรก็ตามปัญหาคือฉันไม่สามารถหาวิธีปิดการใช้งานการเลื่อนแนวนอนเมื่อเลื่อนในแนวตั้ง มันนำไปสู่ประสบการณ์การใช้งานที่ไม่ดีนักเนื่องจากการปัดไปทางซ้ายบนหรือขวาบนจะทำให้ตารางเลื่อนตามแนวทแยงมุม เมื่อผู้ใช้เลื่อนแนวตั้งฉันไม่ต้องการเลื่อนในแนวนอนอย่างแน่นอนจนกว่าผู้ใช้จะหยุดเลื่อนแนวตั้ง ฉันได้ลองทำสิ่งต่อไปนี้แล้ว: JS: offsetX: number; offsetY: number; isScrollingHorizontally = false; isScrollingVertically = false; //Detect the scrolling events ngOnInit() { this.scrollListener = this.renderer.listen( this.taskRows.nativeElement, 'scroll', evt => { this.didScroll(); } ); fromEvent(this.taskRows.nativeElement, 'scroll') .pipe( debounceTime(100), takeUntil(this.destroy$) ) .subscribe(() => { this.endScroll(); }); } didScroll() { if …

17 javascript  html  css  angular  ionic-framework 

ฉันกำลังพยายามสร้างระบบเมนูที่มีรูปภาพและข้อความด้านบนและด้านล่าง ข้อมูลเป็นแบบไดนามิก ฉันต้องการให้ระบบเมนูปรากฏขึ้นเพื่อให้แต่ละภาพมีระยะทางเท่ากันจากภาพอื่น ๆ เพื่อให้พวกเขาเข้าแถวในตารางภาพทั้งแนวนอนและแนวตั้ง ปัญหาคือข้อความ หากข้อความยาวเกินกว่าที่รูปภาพแสดง div จะขยายใหญ่ขึ้น อย่างไรก็ตามมันจะสร้างช่องว่างที่ดูแปลก ๆ เนื่องจากรูปภาพไม่ได้เว้นระยะเท่ากัน ในการหลีกเลี่ยงปัญหานี้ฉันคิดว่าวิธีที่ดีที่สุดคือการให้กองหน้าที่อื่น ๆ ใช้ขนาดของแผนกที่ใหญ่ขึ้น อย่างไรก็ตามฉันไม่แน่ใจว่าจะทำสิ่งนี้อย่างไร ฉันลองด้วย flexbox โดยใช้flex-wrapคุณสมบัติ แม้ว่ามันจะถูกห่อหุ้มอย่างดี แต่ฉันก็ไม่สามารถหาวิธีที่จะทำให้แต่ละภาพเรียงกันในระยะทางเท่ากัน ฉันจะทำอย่างไรเพื่อให้บรรลุเป้าหมายนี้ รหัสของฉันเป็นดังนี้: #outer { display: flex; } #main { display: flex; justify-content: space-between; flex-wrap: wrap; border: solid black 25px; border-radius: 25px; width: 450px; height: 500px; padding: 20px; } .section …

17 html  css  flexbox 

ฉันต้องการสร้างวงกลมจุดด้วย CSS และสร้างด้วยกระบวนการต่อไปนี้ แม้ว่ากระบวนการนี้จะแสดงวงกลมประ แต่ช่องว่างระหว่างจุดสิ้นสุดและจุดเริ่มต้นของเส้นประนั้นแคบลงและช่องว่างไม่สม่ำเสมอ .c { width: 500px; height: 500px; border-width: 15px; border-style: dashed; border-radius: 600px; } <div class="c"></div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล มีวิธีทำชุดช่องว่างหรือไม่? เราสามารถควบคุมช่องว่างระหว่างเส้นประหรือไม่ หากไม่สามารถทำได้ด้วย CSS เพียงอย่างเดียวเรากำลังพิจารณาใช้ JavaScript หรือสิ่งที่คล้ายกัน

16 javascript  html  css 

ฉันมีโต๊ะที่มีตัวเลข เมื่อฉันคลิกที่เซลล์ในตารางมันจะสลับสถานะที่ใช้งานอยู่ ฉันต้องการเลือกหนึ่งเซลล์แล้วกด crtl แล้วเลือกอีกเซลล์หนึ่งเนื่องจากเซลล์ผลลัพธ์ระหว่างเซลล์แรกและเซลล์ที่สองจะกลายเป็นใช้งานอยู่ วิธีการใช้งาน codepen https://codepen.io/geeny273/pen/GRJXBQP <div id="grid"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">3</div> <div class="cell">4</div> <div class="cell">5</div> <div class="cell">6</div> </div> const grid = document.getElementById("grid") grid.onclick = (event) => { event.stopPropagation(); const { className } = event.target; if (className.includes('cell')) { if (className.includes('active')) { event.target.className = 'cell'; } else …

16 javascript  html  css 

ฉันใหม่กับแองกูลาร์ ฉันทำงานเกี่ยวกับ Angular แล้ว ฉันต้องการผูกรายการดร็อปดาวน์แบบซ้อนสำหรับJsonข้อมูลที่มาจากเซิร์ฟเวอร์โดยการเรียก Rest Api ข้อมูลมีหนึ่งคุณลักษณะLgLevelระบุระดับในลำดับชั้นของกลุ่ม ผู้ปกครองจะมีlevel=0, ทันทีChild=1, Grandchild=2และอื่น ๆ ChildและGrandchildมีParentLocationGroupฟิลด์ซึ่งแสดงภายในเมนูหลักเมนูย่อยจะมี นี่คือjsonข้อมูลของฉัน ฉันมีข้อมูลจำนวนมาก แต่ไม่แสดงทั้งหมด { "ArrayOfLocationGroup": { "LocationGroup": [ { "Id": "628", "Name": "TEST1", "GroupId": { "_xmlns": "http://www.air-watch.com/servicemodel/resources" }, "ParentLocationGroup": { "_uuid": "bdce4396-9c60-4831-90f2-6f793becb362", "__text": "570" }, "LgLevel": { "_xmlns": "http://www.air-watch.com/servicemodel/resources", "__text": "0" } }, { "Id": "630", "Name": …

15 html  angular  typescript 

ฉันกำลังพยายามสร้างภาพเคลื่อนไหวสไตล์รถไฟเหาะด้วย CSS ฉันต้องการทราบวิธีโค้ง "รถไฟเหาะ" เมื่ออยู่ในระยะวนรอบ ฉันกำลังค้นหาโซลูชัน CSS ทั้งหมด แต่ถ้ามีความต้องการ JavaScript เล็กน้อยฉันก็ใช้ได้ รหัสของฉัน: #container { width: 200px; height: 300px; margin-top: 50px; position: relative; animation: 10s infinite loop; animation-timing-function: linear; } #coaster { width: 100px; height: 10px; background: lightblue; position: absolute; bottom: 0; left: 1px; right: 1px; margin: 0 auto; } @keyframes …

15 html  css  css-animations  css-transforms 

ฉันมีดังต่อไปนี้ข้อมูลโค้ด (จำเป็นที่จะต้องดูในโหมดเต็มหน้าจอ) ที่ฉันพยายามที่จะวาง<main>องค์ประกอบโดยตรงภายใต้<header>องค์ประกอบ ฉัน<header>อยู่ในตำแหน่งคงที่เพราะฉันต้องการให้อยู่ด้านบนของหน้าจอในขณะที่ผู้ใช้เลื่อนดูเนื้อหาใน<main>องค์ประกอบ ฉันได้ลองทุกอย่างที่ฉันรู้แล้ว แต่สิ่งที่ดีที่สุดที่ฉันสามารถทำได้คือการ<header>วางองค์ประกอบไว้บน<main>องค์ประกอบซึ่งตัดเนื้อหาอันใหญ่ออกไป วิธีการแก้ปัญหาที่เป็นไปได้ใกล้เคียงที่สุดที่ฉันได้มาด้วยการวางด้านบน padding guesstimated ในองค์ประกอบจึงจะล้าง<main> <header>อย่างไรก็ตามวิธีนี้ไม่ได้คำนึงถึงขนาดหน้าจอที่หลากหลายเนื่องจากฉันใช้การปรับขนาด rem แทน px แนวคิดการเติมด้านบนแย่ลงมากเมื่อวางองค์ประกอบหลายอย่างภายในความสูง<header>ที่สัมพันธ์กันหรือใช้เปอร์เซ็นต์ความสูง ในขนาดหน้าจอเดียวทุกอย่างอาจเข้ากันได้อย่างสมบูรณ์แบบและขนาดหน้าจอที่แตกต่างกันเนื้อหาอาจจะถูกปิด สุดท้ายฉันรู้ว่าฉันสามารถใช้ jQuery เพื่อตั้งค่าการเติมด้านบนแบบไดนามิก แต่ดูเหมือนจะไม่ได้ผลดีนัก สงสัยว่ามีโซลูชัน css / html แท้ ทุกคนสามารถบอกสิ่งที่ฉันหายไปที่นี่ได้ไหม วิธีการเติมเต็มด้านบนของฉันเป็นเพียงวิธีแก้ปัญหาที่ใช้การได้หรือไม่ $(document).ready(function() { $('#navToggle').click(function() { $("div#bottom-container > nav").slideToggle(); }); $(window).resize(function() { if(window.innerWidth >= "751") { $("header > div#bottom-container > nav").show(); }else { $("header > …

15 html  css  css-position  fixed 

เราสามารถใช้window.location.replaceเพื่อหลีกเลี่ยงประวัติและกำหนดเป้าหมายจุดยึดบนหน้าโดยไม่ต้องโหลดหน้าใหม่แต่ไม่ใช่ iframes? ปัญหาคือการละเมิด CSP (นโยบายความปลอดภัยของเนื้อหา)ซึ่งscript-src 'unsafe-inline'ต้องเปิดใช้งานสถานะ ยกเว้นว่าฉันไม่ได้กำหนด CSP และแม้ว่าฉันจะกำหนดไว้และให้script-src 'unsafe-inline'มันยังคงให้ข้อผิดพลาดการละเมิดเดียวกัน ผลลัพธ์เดียวกันคือ 11 / chrome / ff Iframe บนโดเมนเดียวกัน(ในไดเรกทอรีเดียวกัน) กำหนดเป้าหมาย iframe ในคอนโซลและใช้window.location.replace('/samepage.html#onpage_anchor')ในคอนโซล มันได้ผล. มันกำหนดเป้าหมายที่สมอหน้าโดยไม่ต้องโหลดหน้าซ้ำและไม่มีประวัติ ใส่รหัสเดียวกันแบบอินไลน์ในลิงก์จุดยึดและใช้งานได้ ใช้รหัสเดียวกันในสคริปต์ภายนอกรับข้อผิดพลาดการละเมิด csp วิธีนี้ใช้ได้ผลดีหากไม่ได้อยู่ใน iframe ฉันพยายามสร้าง CSPจะอนุญาตให้มีการดำเนินการ แต่ไม่ได้ที่สุดอนุญาตนโยบายการรักษาความปลอดภัยข้อมูลที่เป็นไปได้จะช่วยให้มัน แก้ไข: ดังนั้นฉันจึงรวบรวมตัวอย่างบน plunker ซึ่งอนุญาตให้มีหลายไฟล์ดังนั้นฉันจึงสามารถใช้href ที่เหมาะสมซึ่งอ้างอิงหน้าแม่ / ลูก หมายเหตุเกี่ยวกับตัวอย่างของผู้รวบรวม: ปัญหาไม่ได้ทำซ้ำในตัวอย่างเหล่านี้ สคริปต์ทำงานได้อย่างสมบูรณ์แบบแม้ใน iframe อย่างไรก็ตามรหัสเดียวกันไม่สามารถใช้งานได้บนเซิร์ฟเวอร์ภายในเครื่องของฉันหรือเมื่อฉันเรียกใช้งานมันบน VPS ฉันสงสัยว่าการละเมิด CSP ไม่ได้รับการทริกเกอร์จากผู้รวบรวมเพราะผู้รวบรวมกำลังแสดงเนื้อหาไปยังเบราว์เซอร์ผ่านเลเยอร์สิ่งที่เป็นนามธรรมบางประเภท ครั้งแรกที่คุณคลิกลิงก์หีบเพลงในพาเรนต์มันจะทำให้รีเฟรช นี่เป็นเพราะวิธีการโหลดหน้าเว็บในตอนแรกมันไม่ได้อ้างอิง index.html …

15 javascript  html  iframe  browser-history  content-security-policy 

ฉันใหม่ในNext.jsและฉันสงสัยว่าจะเปลี่ยนเส้นทางจากหน้าเริ่มต้น ( / ) ไปยัง/ hello-nextjsได้อย่างไร เมื่อผู้ใช้โหลดหน้าและหลังจากนั้นกำหนดว่าเส้นทาง === / redirect ไปยัง/ hello-nextjs ในการตอบสนองเราเตอร์เราทำสิ่งที่ชอบ: <Switch> <Route path="/hello-nextjs" exact component={HelloNextjs} /> <Redirect to="/hello-nextjs" /> // or <Route path="/" exact render={() => <Redirect to="/hello-nextjs" />} /> </Switch>

15 html  reactjs  routing  react-router  next.js 

ฉันไม่สามารถวางอักขระ﷼(สกุลเงิน Riyal) ไว้หน้าตัวเลข: 1﷼ มันเป็นไปไม่ได้แม้แต่จะวางไว้ระหว่างตัวเลข 2 ตัวมันถูกวางที่ท้าย: 11﷼ ไม่มีปัญหาใด ๆ หากคุณพยายามวางไว้ด้านหน้าตัวอักษร: ﷼a ไม่มีใครรู้ว่าเกิดอะไรขึ้นและฉันจะทำอย่างไร

14 html 

จะทำให้ iframe ตอบสนองได้อย่างไรโดยไม่ต้องสมมติอัตราส่วนกว้างยาว? ตัวอย่างเช่นเนื้อหาอาจมีความกว้างหรือความสูงซึ่งไม่เป็นที่รู้จักก่อนแสดงผล หมายเหตุคุณสามารถใช้ Javascript ตัวอย่าง: <div id="iframe-container"> <iframe/> </div> ปรับขนาดนี้iframe-containerเพื่อให้เนื้อหาของมันพอดีกับภายในโดยไม่มีพื้นที่เพิ่มเติมกล่าวคือมีพื้นที่ว่างเพียงพอสำหรับเนื้อหาจึงสามารถแสดงได้โดยไม่ต้องเลื่อน แต่ไม่มีพื้นที่มากเกินไป คอนเทนเนอร์ล้อม iframe อย่างสมบูรณ์ สิ่งนี้แสดงวิธีการตอบสนอง iframe โดยสมมติว่าอัตราส่วนภาพของเนื้อหาคือ 16: 9 แต่ในคำถามนี้อัตราส่วนภาพแปรผัน

14 javascript  html  css  iframe  responsive-design 

เมื่อฉันพิมพ์หมายเลขสุดท้ายในที่หมายเลขแรกไปภายในtext-box(มันจะหายไป) ก็เพิ่มหนึ่งพื้นที่พิเศษ หลังจากที่ฉันคลิกด้านนอกtext-boxมันดูดีซึ่งฉันต้องการระหว่างการพิมพ์ตัวอักษรตัวสุดท้าย #number_text { padding-left: 9px; letter-spacing: 31px; border: 0; background-image: linear-gradient(to right, #e1e1e1 70%, rgba(255, 255, 255, 0) 0%); background-position: left bottom; background-size: 38px 1px; background-repeat: repeat-x; width: 220px; box-sizing: border-box; outline:none; } <input type="text" id="number_text" maxlength="6" pattern="\d{6}" value="1234" > เรียกใช้ข้อมูลโค้ดHide resultsขยายตัวอย่างข้อมูล ช่วยฉันออกจากปัญหานี้ ขอบคุณ

14 javascript  jquery  html  css