salesforce 用input 实现currency功能

最近项目是国内项目定制化要求比较高，所以我们没办法用salesforce提供标签编写代码，遇到了一个currency字段显示问题。下面是我的实现方法。第一个截图输入的是数字，当输入结束后变成金钱 显示方式。欢迎沟通交流。

 

 下面是代码CSS

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{

    margin: 0;

    padding: 0;

}

input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button {

    -webkit-appearance: none;

}

input[type="number"]{

    -moz-appearance: textfield;

}

input,button {

    /* 去掉轮廓线 */

    outline: none;

    border:none;

}

input {

    padding: 0 12px;

    background-color: beige;

}

 

html 代码：

<template>

    <lightning-card>

        <label >测试原生input</label>

        <input name="COP_Rebate_Amount_HB00__c" type="text" class="controls" oninput={handleFieldValesChange} value={testObj.testStr} onfocus={handleNumberInputOnfocusMethod} onblur={handleNumberInputOnblurMethod}>

    </lightning-card>

</template>

 

js 代码：

import { LightningElement ,track} from 'lwc';

export default class CustomInputLWC extends LightningElement {

    @track testObj = {

        testStr:'',

        test:undefined,

    }

    handleFieldValesChange(event){

        //返利使用

        this.testObj.test = event.target.value !== 0 ? event.target.value : 0;

        this.testObj.testStr = event.target.value !== 0 ? event.target.value : 0;

    }

    handleNumberInputOnfocusMethod(event){

        event.target.setAttribute("type","number");

        event.target.value = parseFloat(this.testObj.test);

    }

    handleNumberInputOnblurMethod(event){

        event.target.setAttribute("type","text");

        var currencyNumber = this.changeNumberToMoneyMethod(this.testObj.test);

        this.testObj.testStr = currencyNumber

        event.target.value = currencyNumber;

    }

    changeNumberToMoneyMethod(currencyNumber) {

        if (currencyNumber) {

            currencyNumber = typeof currencyNumber == 'string' ? parseFloat(currencyNumber) : currencyNumber ;//判断是否是字符串如果是字符串转成数字

            currencyNumber = currencyNumber.toFixed(2); //保留两位

            currencyNumber = parseFloat(currencyNumber); //转成数字

            currencyNumber = currencyNumber.toLocaleString(); //转成金额显示模式

            //判断是否有小数

            if (currencyNumber.indexOf('.') == -1) {

                currencyNumber = currencyNumber + '.00'

            } else {

                currencyNumber = currencyNumber.split('.')[1].length < 2 ? currencyNumber + '0' : currencyNumber

            }

            return currencyNumber //返回的是具有千分位格式并保留2位小数的字符串

        } else {

            return (currencyNumber = null)

        }

    }

}