Cách thay đổi đầu vào thành chữ hoa vì nó đang được nhập

Tôi đang sử dụng onkeyup="this.value=this.value.toUpperCase();" để thay đổi giá trị văn bản đầu vào bằng chữ hoa. Điều này là làm việc nhưng nhu cầu của tôi là thay đổi một chữ cái duy nhất trong hộp đầu vào mà không cần sử dụng sự kiện chuột. Nếu tôi sử dụng phím mũi tên trái để di chuyển con trỏ, thì con trỏ sẽ chuyển sang kết thúc. Làm thế nào để tôi sửa đổi kịch bản này, vì vậy mà tôi có thể điều hướng ngược sử dụng các phím mũi tên và sửa đổi một văn bản ở đâu đó ở giữaCách thay đổi đầu vào thành chữ hoa vì nó đang được nhập

Mã hiện nay trông như thế này ...

<h:inputText value="#{_input.response}" autocomplete="off" onmouseover="this.focus();" onkeyup="this.value=this.value.toUpperCase();"/>

Nguồn

2010-09-16 Achaius

Sẽ dễ dàng hơn nhiều nếu bạn thực hiện việc này trên sự kiện làm mờ phần tử. –

Là một người dùng cuối, tôi vui vì tôi không sử dụng ứng dụng của bạn khác tôi sau đó sẽ phải ngừng sử dụng nó nếu nó đã làm những việc như thế này !! Tôi thấy nó gây khó chịu nhất khi tôi gõ để thay đổi tôi. Nếu bạn cần giá trị bằng chữ hoa, hãy thực hiện sau khi tôi gửi/gửi, v.v. - tại sao lại là pester khi tôi gõ? Tôi chắc chắn nếu những gì bạn đang làm vi phạm một số quy tắc hồng y/pháp luật của xây dựng phần mềm nhưng nếu không có, IMHO, nên có một trên những dòng này. – InSane

Đồng ý với In Sane. Tôi có lẽ sẽ tiếp tục nhấn phím capslock của tôi quá, để biến những mũ gây phiền nhiễu: P –

Làm thế nào về CSS:

input.upper { text-transform: uppercase; }

Lưu ý: Thao tác này sẽ vẫn gửi giá trị cho máy chủ như được người dùng nhập và không phải là phần trên.

Nguồn

2010-09-16 08:34:21

Tôi không chắc chắn nếu đầu vào sẽ ở trên hoa thực sự. Nó chỉ là một thủ thuật kiểu hay văn bản thực sự biến thành chữ hoa (nói nếu bạn viết nội dung của biểu mẫu vào cơ sở dữ liệu)? –

Tạo kiểu chữ hoa, sau đó thay đổi nó khi bạn nhận được. –

Bạn sẽ phải in hoa trên máy chủ. Nếu JS bị tắt và bạn dựa vào chữ hoa, bạn phải xác minh nó trên máy chủ – mplungjan

Bạn có thể kiểm tra xem phím nào đã được nhấn trong quá trình onkeyup và chỉ cho khóa a-z. Nên khá dễ dàng vì mã phím là số và bạn chỉ có thể kiểm tra xem mã khóa có nằm giữa mã khóa cho (65) và z (90) hay không.

Nguồn

2010-09-16 08:36:49 JDT

Giống như kristoffer nói, có lẽ tốt nhất để sử dụng kiểu và chuyển đổi serverside. Ngoài ra còn có một plugin jQuery để buộc hoa: http://plugins.jquery.com/plugin-tags/uppercase

<html> 
    <head> 
     <style> 
      input.upc { text-transform: uppercase; } 
     </style> 
     <script> 
      // thanks 2 'm2pc' : http://www.webdeveloper.com/forum/showpost.php?s=9f258cba84d461026bb9ed478e86776d&p=423545&postcount=3 
      function doGetCaretPosition (oField) { 
       var iCaretPos = 0; 
       if (document.selection) // IE Support 
        { 
        oField.focus(); 
        var oSel = document.selection.createRange(); 
        // Move selection start to 0 position 
        oSel.moveStart ('character', -oField.value.length); 
        // The caret position is selection length 
        iCaretPos = oSel.text.length; 
        } 
       else 
        if (oField.selectionStart || oField.selectionStart == '0') // Firefox support 
         iCaretPos = oField.selectionStart; 
       return (iCaretPos); 
       } 
      function doSetCaretPosition (oField, iCaretPos) 
       { 
       if (document.selection) // IE Support 
        { 
        oField.focus(); 
        var oSel = document.selection.createRange(); 
        oSel.moveStart ('character', -oField.value.length); 
        oSel.moveStart ('character', iCaretPos); 
        oSel.moveEnd ('character', 0); 
        oSel.select(); 
        } 
       else 
        if (oField.selectionStart || oField.selectionStart == '0') // Firefox support 
         { 
         oField.selectionStart = iCaretPos; 
         oField.selectionEnd = iCaretPos; 
         oField.focus(); 
         } 
       } 
      function forceupper(o) 
       { 
       var x = doGetCaretPosition(o); 
       o.value=o.value.toUpperCase(); 
       doSetCaretPosition(o,x); 
       } 
     </script> 
    </head> 
    <body> 
     <form method="get" target="#"> 
      Fld 1 : browser shows upper-case, form submits mixed-case<br> 
      <input name="f1" id="idf1" class="upc" type="text" value="X"><br> 
      Fld 2 : javascript updates text to uppercase, form submits uppercase<br> 
      <input name="f2" id="idf2" class="js" type="text" value="Y" onkeyup="forceupper(this);"><br> 
      <input type="submit" value="send"> 
     </form> 
    </body> 
</html>

Nguồn

2011-03-11 10:38:34 jmullee

Một mẫu có thể là:

<p:inputText id="nombres" 
      value="#{userController.user.nombres}" 
      style="text-transform: uppercase" />

Nguồn

2012-09-05 15:41:58 Juan

Chào mừng bạn đến với SO Juan. Thay vì cố gắng để có một kết xuất tốt đẹp cho '<' & '>' bạn nên thêm 4 không gian để làm nổi bật mã hoặc đặt chúng giữa '. – j0k

-1

bootstrap 3 có các lớp chuyển đổi chuyển đổi hình thức văn bản trong các thành phần với các lớp hoa văn bản.

<p class="text-lowercase">Lowercased text.</p> 
<p class="text-uppercase">Uppercased text.</p> 
<p class="text-capitalize">Capitalized text.</p>

Nguồn

2017-05-28 05:05:58

Cách thay đổi đầu vào thành chữ hoa vì nó đang được nhập

Trả lời

Các vấn đề liên quan