통화 기호가있는 HTML 텍스트 입력 필드

통화 기호가있는 HTML 텍스트 입력 필드

---

맨 처음에 "$"기호를 포함하는 텍스트 입력 필드를 갖고 싶습니다. 필드에 어떤 편집이 발생하더라도 기호가 영구적으로 유지되도록합니다.

숫자 만 입력하면 좋겠지 만 그건 멋진 추가 일뿐입니다.

---

테두리없는 입력 필드 주위에 테두리가있는 범위를 사용하여 고정 접두사 또는 접미사가있는 입력 필드를 시뮬레이션하는 것이 좋습니다. 다음은 기본적인 킥오프 예입니다.

.currencyinput {
    border: 1px inset #ccc;
}
.currencyinput input {
    border: 0;
}

<span class="currencyinput">$<input type="text" name="currency"></span>

---

상위 .input-icondiv를 사용하십시오 . 선택적으로 .input-icon-right.

<div class="input-icon">
  <input type="text">
  <i>$</i>
</div>

<div class="input-icon input-icon-right">
  <input type="text">
  <i>€</i>
</div>

수직 아이콘 정렬 transform및 top한 세트 pointer-events에 none해당 클릭 입력에 집중되도록. padding및 width적절하게 조정하십시오 .

.input-icon {
  position: relative;
}

.input-icon > i {
  position: absolute;
  display: block;
  transform: translate(0, -50%);
  top: 50%;
  pointer-events: none;
  width: 25px;
  text-align: center;
  font-style: normal;
}

.input-icon > input {
  padding-left: 25px;
  padding-right: 0;
}

.input-icon-right > i {
  right: 0;
}

.input-icon-right > input {
  padding-left: 0;
  padding-right: 25px;
  text-align: right;
}

허용되는 답변과 달리 오류가있을 때 빨간색 테두리와 같은 입력 유효성 검사 강조 표시가 유지됩니다.

Bootstrap 및 Font Awesome을 사용한 JSFiddle 사용 예

---

입력 필드를 범위로 래핑 할 수 있습니다 position:relative;. 그런 다음 :before content:"€"통화 기호 를 추가 하고 만듭니다 position:absolute. JSFiddle 작동

HTML

<span class="input-symbol-euro">
    <input type="text" />
</span>

CSS

.input-symbol-euro {
    position: relative;
}
.input-symbol-euro input {
    padding-left:18px;
}
.input-symbol-euro:before {
    position: absolute;
    top: 0;
    content:"€";
    left: 5px;
}

업데이트 텍스트 상자의 왼쪽 또는 오른쪽에 유로 기호를 넣으려면. JSFiddle 작동

HTML

<span class="input-euro left">
    <input type="text" />
</span>
<span class="input-euro right">
    <input type="text" />
</span>

CSS

 .input-euro {
     position: relative;
 }
 .input-euro.left input {
     padding-left:18px;
 }
 .input-euro.right input {
     padding-right:18px;
     text-align:end; 
 }

 .input-euro:before {
     position: absolute;
     top: 0;
     content:"€";
 }
 .input-euro.left:before {
     left: 5px;
 }
 .input-euro.right:before {
     right: 5px;
 }

---

당신이 할 수 없기 때문에 ::before함께 content: '$'입력에와 절대 위치 요소를 추가하는 추가 HTML을 추가 - 나는 배경 SVG 인라인 CSS로 할 좋아한다.

다음과 같이 진행됩니다.

input {
    width: 85px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='16px' width='85px'><text x='2' y='13' fill='gray' font-size='12' font-family='arial'>$</text></svg>");
    padding-left: 12px;
}

다음을 출력합니다.

참고 : 코드는 모두 한 줄에 있어야합니다. 최신 브라우저에서 지원은 꽤 훌륭하지만 테스트해야합니다.

---

Put the '$' in front of the text input field, instead of inside it. It makes validation for numeric data a lot easier because you don't have to parse out the '$' after submit.

You can, with JQuery.validate() (or other), add some client-side validation rules that handle currency. That would allow you to have the '$' inside the input field. But you still have to do server-side validation for security and that puts you back in the position of having to remove the '$'.

---

 $<input name="currency">

See also: Restricting input to textbox: allowing only numbers and decimal point

---

If you only need to support Safari, you can do it like this:

input.currency:before {
  content: attr(data-symbol);
  float: left;
  color: #aaa;
}

and an input field like

<input class="currency" data-symbol="€" type="number" value="12.9">

This way you don't need an extra tag and keep the symbol information in the markup.

---

I just used :before with the input and passed $ as the content

input{ 
   margin-left: 20px;
 }
input:before {
  content: "$";
  position: absolute;
}

---

Another solution which I prefer is to use an additional input element for an image of the currency symbol. Here's an example using an image of a magnifying glass within a search text field:

html:

<input type="image" alt="Subscribe" src="/graphics/icons/search-button.png">
<input type="text" placeholder="Search" name="query">

css:

#search input[type="image"] {
background-color: transparent;
border: 0 none;
margin-top: 10px;
vertical-align: middle;
margin: 5px 0 0 5px;
position: absolute;
}

This results in the input on the left sidebar here:

https://fsfe.org

---

I ended up needing the type to still remain as a number, so used CSS to push the dollar sign into the input field using an absolute position.

<div>
   <span style="position: absolute; margin-left: 1px; margin-top: 1px;">$</span>
   <input type="number" style="padding-left: 8px;">
</div>

---

None of these answers really help if you are concerned with aligning the left border with other text fields on an input form.

I'd recommend positioning the dollar sign absolutely to the left about -10px or left 5px (depending whether you want it inside or outside the input box). The inside solution requires direction:rtl on the input css.

You could also add padding to the input to avoid the direction:rtl, but that will alter the width of the input container to not match the other containers of the same width.

<div style="display:inline-block">
 <div style="position:relative">
  <div style="position:absolute; left:-10px;">$</div>
 </div>
 <input type='text' />
</div>

or

<div style="display:inline-block">
 <div style="position:relative">
  <div style="position:absolute; left:5px;">$</div>
 </div>
 <input type='text' style='direction: rtl;' />
</div>

https://i.imgur.com/ajrU0T9.png

Example: https://plnkr.co/edit/yshyuRMd06K1cuN9tFDv?p=preview

---

<style>
.currencyinput {
    border: 1px inset #ccc;
    
    border-left:none;
}
.currencyinput input {
    border: 0;
}
</style>

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<input type="text" oninput="this.value = this.value.replace(/[^0-9]/.g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" style="text-align:right;border-right:none;outline:none" name="currency"><span class="currencyinput">%</span>
</body>
</html>

%

---

For bootstrap its works

<span class="form-control">$ <input type="text"/></span>

Don't use class="form-control" in input field.

---

.currencyinput {
    border: 1px inset #ccc;
    padding-bottom: 1px;//FOR IE & Chrome
}
.currencyinput input {
    border: 0;
}

<span class="currencyinput">$<input type="text" name="currency"></span>

---

Yes, if you are using bootstrap, this would work.

.form-control input {
    border: none;
    padding-left: 4px;
}

and

<span class="form-control">$ <input type="text"/></span>

---

.currencyinput {
    border: 1px inset #ccc;

    border-left:none;
}
.currencyinput input {
    border: 0;`enter code here`
}

<input type="text" oninput="this.value = this.value.replace(/[^0-9]/.g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" style="text-align:right;border-right:none;outline:none" name="currency"><span class="currencyinput">%</span>

참고URL : https://stackoverflow.com/questions/2913236/html-text-input-field-with-currency-symbol