REACT - 防止小數點後2位小數點後的輸入

我在組件中有一個輸入框。如果輸入框的值包含2個以上的小數位，我想阻止用戶添加任何輸入。REACT - 防止小數點後2位小數點後的輸入

E.g.如果用戶輸入10.95我不想讓他們在此值後寫任何其他內容。他們仍然可以將它更新到101.95，但它應該防止在小數點後的位置添加任何輸入。

我到目前爲止的代碼如下。

class inputBox extends Component { 

    countDecimals(value) { 
     if(Math.floor(value) === value) return 0; 
     return value.toString().split(".")[1].length || 0; 
    } 

    updateValue(e) { 
     if(this.countDecimals(e.target.value) > 2) { 
      //prevent user from inputting into box after the decimal place... 
     } 
    } 

    render() { 
     return(
      <input type='text' onChange={this.updateValue} /> 
     ) 
    } 
}

來源

2017-02-13 peter flanagan

我假設'reactjs'有一種綁定到'keydown'事件的方法，在這種情況下你可以做你的檢查，然後'返回false'，如果你發現它有2個以上的小數以防止新的入口？ – Nope

document.getElementById("yourinput").oninput=function(){ 
    this.value=this.value.toString().split(".").map((el,i)=>i?el.split("").slice(0,2).join(""):el).join("."); 
};

更換新的值的值，即縮短到每個點後2個字符。 http://jsbin.com/soretokuse/1/edit

來源

2017-02-13 15:43:36

@peterflanagan沒有人阻止你翻譯 –

我認爲你需要保存舊值，應該工作。

var input=document.getElementById('input'), 
 
    countDecimals=function(value) { 
 
    if(Math.floor(value) === value) return 0; 
 
    if(value.toString().split(".")[1]) 
 
    return value.toString().split(".")[1].length || 0; 
 
}, 
 
    updateValue=function(val) { 
 
    if(countDecimals(val) > 2) { 
 
     input.value=input.getAttribute('oldValue'); 
 
    } 
 
}; 
 

 
input.oninput=function(){ 
 
    updateValue(this.value); 
 
    input.setAttribute('oldValue',this.value); 
 
}

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

來源

2017-02-13 15:57:49

至於我在Javascript和HTML知識去沒有 '簡單的解決方案' 這一點。使用'原始'JS和ExtJs表單學習了我，有多種方法可以集中和操縱一個領域。這使得在正確的時間很難操縱內部價值。

因此，請允許我將問題分爲多個問題。我將嘗試解決：

觸發

您希望您的邏輯，在所有的時候，有事到外地跑。以下鏈接爲您提供了選擇： http://www.w3schools.com/TAGS/ref_eventattributes.asp

當您使用的onchange它當有人改變後你模糊字段中的值會觸發（單擊或選項卡從現場的距離）。所以這不好。

您可以嘗試按鍵（上，下，按）事件。但是，當你粘貼一個值時，這不包括在內。

長話短說，理論上你可以嘗試在你能想到的每一個事件上實現一個函數，以確保你能夠捕獲用戶的輸入並做你想做的事情。

我的解決方案是，當您關注一個字段並驗證該值並執行更多邏輯時，啓動一個計時器。並最終確定你想要做的模糊處理。

確定值

你可以寫一些漂亮的正則表達式，或者告訴你，如果該值是正確的單行聲明的正確性。它最終都是一樣的，它應該適合你的需求。

因此，像：

var inputVar = element.value; 
var inputFloat = parseFloat(inputVar); 
var normalizeInput = Math.round(inputFloat * 100)/100; 
if(inputFloat > 0 && normalizeInput == inputFloat){ 
    #correct value 
}else{ 
    #incorrect value 
}

處理正確/不正確輸入

現在你要處理的用戶輸入，做一些事情。將字段設置爲禁用或只讀的內容會阻止進一步的輸入和更改，但不會讓用戶對您的字段進行任何操作。

正如我所看到的，您希望該字段不會在功能上發生變化，您希望能夠對其進行編輯。

讓你留下2種選擇：

通過重寫與期望值element.value直接編輯字段內容。

操作鍵輸入/選擇以嘗試將光標保持在用戶在校正錯誤輸入時所放置的相同位置。

我會選擇前者，因爲它很少麻煩，儘管它可能會混淆光標位置（依賴於瀏覽器）。

最終實現

因此，我建議將所有上述：

焦點在你開始運行的setTimeout或setInterval的 http://www.w3schools.com/jsref/met_win_settimeout.asp http://www.w3schools.com/jsref/met_win_setinterval.asp

在功能運行，那麼，你檢查如果有以前的值集。

第一次不是這樣的：你必須把這個先前的值保存在某個地方，你可以把它保存在JavaScript中的一個變量中，或者把它放在DOM中的字段中。

http://www.w3schools.com/jsref/met_element_setattribute.asp

var inputElement.setAttribute('old_value', oldValue);

現在你是否該值在保存之前是正確的，否則只是默認情況下，回空（或嘗試將值標準化的東西，驗證，你可以繼續切掉個字符例如右邊）。

現在在每次運行中檢查值是否正確。如果該值正確，則將新值保存爲「新」之前的值（如果使用該方法，則再次調用setTimeout）。

如果不正確，則回寫舊值或嘗試對輸入值進行歸一化，如果失敗則使用最後一次正確的值。

在您清除的setTimeout或setInterval的在後臺運行的模糊事件： http://www.w3schools.com/jsref/met_win_cleartimeout.asp http://www.w3schools.com/jsref/met_win_clearinterval.asp

（或者你可以檢查document.activeElement是相同的這一「循環運行一個'所以它知道何時停止）。

模糊時，您最後一次檢查值並執行相同的邏輯以防止錯誤輸入。

B計劃

使用HTML5號碼輸入字段：

HTML 5 input type="number" element for floating point numbers on Chrome

Try <input type="number" step="0.01" /> if you are targeting 2 decimal 
places :-). 

edited Apr 27 '15 at 18:10 
Andre Figueiredo

後者只能在支持它的瀏覽器。

來源

2017-02-13 16:37:13

您可以使用React受控組件並將一個狀態綁定到輸入的值atrribute。然後你的onChange事件處理程序看起來像。

updateValue(e) { 
     this.setState({ value: e.target.value.toString().split(".").map((el,i)=>i?el.split("").slice(0,2).join(""):el).join(".")}) 
    }

爲我工作。

來源

2018-02-09 08:14:32

REACT - 防止小數點後2位小數點後的輸入

回答

相關問題