คุณจะตั้งค่ากล่องข้อความเป็นตัวพิมพ์ใหญ่โดยอัตโนมัติได้อย่างไร?

ฉันใช้แอตทริบิวต์สไตล์ต่อไปนี้เพื่อตั้งค่าการป้อนข้อมูลของผู้ใช้เป็นตัวพิมพ์ใหญ่เพื่อที่ว่าเมื่อผู้ใช้เริ่มพิมพ์ในกล่องข้อความrailwayควรเปลี่ยนเป็นตัวพิมพ์ใหญ่เช่นRAILWAY โดยที่ผู้ใช้ไม่ต้องกดปุ่ม Caps-lock

นี่คือรหัสที่ฉันใช้สำหรับอินพุต:

<input type = "text" class = "normal" name = "Name" size = "20" maxlength = "20"> <img src="../images/tickmark.gif" border="0" style='text-transform:uppercase'/>

แต่ฉันไม่ได้รับผลลัพธ์ที่ต้องการโดยใช้แอตทริบิวต์นี้

คุณได้ใส่styleแอตทริบิวต์บน<img>แท็กแทนที่จะเป็นไฟล์<input>.

นอกจากนี้ยังไม่ควรเว้นวรรคระหว่างชื่อแอตทริบิวต์และค่า ...

<input type="text" class="normal" 
       name="Name" size="20" maxlength="20" 
       style="text-transform:uppercase" /> 
<img src="../images/tickmark.gif" border="0" />

โปรดทราบการเปลี่ยนแปลงครั้งนี้เป็นอย่างหมดจดภาพและไม่เปลี่ยนแปลงข้อความที่ถูกส่งใน POST

ฉันคิดว่าวิธีแก้ปัญหาที่มีประสิทธิภาพที่สุดที่จะทำให้มั่นใจได้ว่าโพสต์เป็นตัวพิมพ์ใหญ่คือการใช้เมธอด oninput แบบอินไลน์เช่น:

<input oninput="this.value = this.value.toUpperCase()" />

แก้ไข

บางคนบ่นว่าเคอร์เซอร์กระโดดไปจนสุดเมื่อแก้ไขค่าดังนั้นเวอร์ชันที่ขยายเล็กน้อยนี้ควรแก้ไขได้

<input oninput="let p=this.selectionStart;this.value=this.value.toUpperCase();this.setSelectionRange(p, p);" />

คำตอบที่มีtext-transformation:uppercaseรูปแบบจะไม่ส่งข้อมูลตัวพิมพ์ใหญ่ไปยังเซิร์ฟเวอร์เมื่อส่ง - สิ่งที่คุณอาจคาดหวัง คุณสามารถทำสิ่งนี้แทนได้:

สำหรับการป้อนข้อมูล HTML ของคุณให้ใช้ onkeydown:

<input name="yourInput" onkeydown="upperCaseF(this)"/>

ใน JavaScript ของคุณ:

function upperCaseF(a){
    setTimeout(function(){
        a.value = a.value.toUpperCase();
    }, 1);
}

ด้วยupperCaseF()ฟังก์ชั่นในทุกกดลงที่สำคัญมูลค่าของการป้อนข้อมูลที่เป็นไปกลายเป็นรูปแบบตัวพิมพ์ใหญ่ของมัน

ฉันยังเพิ่มการหน่วงเวลา 1 มิลลิวินาทีเพื่อให้บล็อกโค้ดฟังก์ชันทริกเกอร์หลังจากเหตุการณ์คีย์ดาวน์เกิดขึ้น

ปัญหาของคำตอบแรกคือตัวยึดจะเป็นตัวพิมพ์ใหญ่ด้วย ในกรณีที่คุณต้องการให้เฉพาะอินพุตเป็นตัวพิมพ์ใหญ่ให้ใช้วิธีแก้ไขปัญหาต่อไปนี้

ในการเลือกเฉพาะองค์ประกอบอินพุตที่ไม่ว่างเปล่าให้ใส่แอตทริบิวต์ที่จำเป็นในองค์ประกอบ:

<input type="text" id="name-input" placeholder="Enter symbol" required="required" />

ตอนนี้ในการเลือกใช้:validองค์ประกอบหลอก:

#name-input:valid { text-transform: uppercase; }

วิธีนี้คุณจะป้อนตัวพิมพ์ใหญ่เฉพาะอักขระ

ลอง

<input type="text" class="normal" 
       style="text-transform:uppercase" 
       name="Name" size="20" maxlength="20"> 
 <img src="../images/tickmark.gif" border="0"/>

แทนที่จะใส่แท็กสไตล์รูปภาพในการป้อนข้อมูลเนื่องจากคุณกำลังเขียนเมื่อป้อนข้อมูลไม่ได้อยู่บนรูปภาพ

ตั้งค่ารูปแบบต่อไปนี้เพื่อตั้งค่ากล่องข้อความทั้งหมดเป็นตัวพิมพ์ใหญ่

input {text-transform: uppercase;}

ปัญหาเกี่ยวกับ CSS Styling คือการไม่เปลี่ยนข้อมูลและหากคุณไม่ต้องการมีฟังก์ชัน JS ให้ลอง ...

<input onkeyup="this.value = this.value.toUpperCase()" />

ด้วยตัวของมันเองคุณจะเห็นฟิลด์ใช้ประโยชน์จากคีย์อัพดังนั้นจึงควรรวมฟิลด์นี้กับฟิลด์style='text-transform:uppercase'อื่น ๆ ที่แนะนำ

การใช้ CSS text-transform: uppercaseไม่ได้เปลี่ยนอินพุตจริง แต่เปลี่ยนแค่รูปลักษณ์เท่านั้น หากคุณส่งข้อมูลอินพุตไปยังเซิร์ฟเวอร์จะยังคงเป็นตัวพิมพ์เล็กหรือตามที่คุณป้อน ในการแปลงค่าอินพุตคุณต้องเพิ่มโค้ดจาวาสคริปต์ดังต่อไปนี้:

document.querySelector("input").addEventListener("input", function(event) {
  event.target.value = event.target.value.toLocaleUpperCase()
})

<input>

ที่นี่ฉันใช้toLocaleUpperCase()เพื่อแปลงinputค่าเป็นตัวพิมพ์ใหญ่ ทำงานได้ดีจนกว่าคุณจะต้องแก้ไขสิ่งที่คุณป้อนเช่นถ้าคุณป้อน ABCXYZ และตอนนี้คุณพยายามเปลี่ยนเป็น ABCLMNXYZ มันจะกลายเป็น ABCLXYZMN เพราะหลังจากป้อนข้อมูลทุกครั้งเคอร์เซอร์จะกระโดดไปจนสุด

เพื่อเอาชนะการกระโดดของเคอร์เซอร์เราต้องทำการเปลี่ยนแปลงต่อไปนี้ในฟังก์ชันของเรา:

document.querySelector("input").addEventListener("input", function(event) {
  var input = event.target;
  var start = input.selectionStart;
  var end = input.selectionEnd;
  input.value = input.value.toLocaleUpperCase();
  input.setSelectionRange(start, end);
})

<input>

ตอนนี้ทุกอย่างทำงานได้ตามที่คาดไว้ แต่ถ้าคุณมีพีซีที่ทำงานช้าคุณอาจเห็นข้อความกระโดดจากตัวพิมพ์เล็กเป็นตัวพิมพ์ใหญ่ขณะที่คุณพิมพ์ หากสิ่งนี้ทำให้คุณรำคาญนี่เป็นเวลาที่ต้องใช้ CSS ใช้input: {text-transform: uppercase;}กับไฟล์ CSS และทุกอย่างจะดี

ทั้งสองอย่างนี้จะแสดงอินพุตเป็นตัวพิมพ์ใหญ่และส่งข้อมูลอินพุตผ่านโพสต์เป็นตัวพิมพ์ใหญ่

HTML

<input type="text" id="someInput">

JavaScript

var someInput = document.querySelector('#someInput');
someInput.addEventListener('input', function () {
    someInput.value = someInput.value.toUpperCase();
});

อย่างที่ไม่มีใครแนะนำ:

หากคุณต้องการใช้โซลูชัน CSS กับตัวยึดตำแหน่งตัวพิมพ์เล็กคุณเพียงแค่กำหนดสไตล์ตัวยึดแยกต่างหาก แบ่งรูปแบบตัวยึด 2 แบบสำหรับความเข้ากันได้ของ IE

input {
    text-transform: uppercase;
}
input:-ms-input-placeholder {
    text-transform: none;
}
input::placeholder {
    text-transform: none;
}

The below input has lowercase characters, but all typed characters are CSS-uppercased :<br/>
<input type="text" placeholder="ex : ABC" />

ลองใช้วิธีแก้ปัญหาด้านล่างสิ่งนี้จะดูแลเมื่อผู้ใช้ป้อนเฉพาะพื้นที่ว่างในช่องป้อนข้อมูลที่ดัชนีแรก

document.getElementById('capitalizeInput').addEventListener("keyup",   () => {
  var inputValue = document.getElementById('capitalizeInput')['value']; 
  if (inputValue[0] === ' ') {
      inputValue = '';
    } else if (inputValue) {
      inputValue = inputValue[0].toUpperCase() + inputValue.slice(1);
    }
document.getElementById('capitalizeInput')['value'] = inputValue;
});

<input type="text" id="capitalizeInput" autocomplete="off" />

<script type="text/javascript">
    function upperCaseF(a){
    setTimeout(function(){
        a.value = a.value.toUpperCase();
    }, 1);
}
</script>

<input type="text" required="" name="partno" class="form-control" placeholder="Enter a Part No*" onkeydown="upperCaseF(this)">