어떻게 내 텍스트 상자의 첫 번째 문자를 일정하게 만들거나 고정시킬 수 있습니까?

Question

금액을 가져 오는 텍스트 상자가 있습니다.

<g:TextBox ui:field="fee">$</g:TextBox> 

내가 원하는 것은 사용자가 내 텍스트 상자 안에/편집 $ 기호를 삭제할 수 없다 만, 그 $ 기호 뒤에

을 금액을 입력 할 수 있다는 것입니다 :

내 텍스트 상자는 이미 달러 (A $) 기호가

가능합니까?

입력 상자를 통해 $ 기호와 LAVEL을 넣어 :

Answer 1

이 이벤트

button.addKeyPressHandler(new KeyPressHandler() { 
    public void onKeyPress(KeyPressEvent event) { 
    TextBox b = (TextBox)event.getSource(); 
    if (!b.getValue().startsWith("$")) { 
     b.setValue("$" + b.getValue()); 
    } 
    } 
}); 

CSS를 기반으로하는 솔루션의 모양과 더 나은 수행해야하지만

를 사용하여 작동합니다.

Label l = new Label("$"); 
TextBox b = new TextBox(); 
l.getElement().addClassName("dollarlabel"); 
b.getElement().addClassName("dollarinput"); 
RootPanel.get().add(b); 
RootPanel.get().add(l); 

일부 CSS를 당신은 더 나은 텍스트 상자 외부의 라벨로 $을 넣어 것

.dollarlabel { 
    position: relative; 
    float: left; 
} 
.dollarinput { 
    margin-left: -10px; 
    padding-left: 10px; 
} 

Answer 2

스타일. 텍스트 상자에있는 것처럼 보이게하려면 $ 및 텍스트 상자에 프레임이있는 <span>, <div> 또는 <label>의 스타일을 지정하고 텍스트 상자의 테두리를 제거하면됩니다. UiBinder I18N을 사용하면 상자의 양쪽에서 통화 레이블을 쉽게 이동할 수 있습니다.

참고로, Google이 드롭 다운 버튼의 Gmail, 리더 및 그룹 검색 창에서 수행하는 작업입니다. 같은

뭔가 :

<ui:style> 
    .container { 
    border: 1px solid gray; 
    } 
    .inputbox { 
    border: none; 
    } 
</ui:style> 
<g:HTMLPanel tag="label" addStyleNames="{style.container}"> 
    <ui:msg> 
    $ 
    <ui:ph name="inputbox"><g:TextBox addStyleNames="{style.inputbox}" /></ui:ph> 
    </ui:msg> 
</g:HTMLPanel> 

그리고 로케일이 입력 상자의 오른쪽에 €을 넣어 {0} €, 말, 같은 메시지를 정의 할 수 있습니다.