如何禁用后退按钮浏览器

Question

could someone please help me what codes I need to disable the back browser function? I want to disable it because when the user uses it, it resets all user entry and gets back from the beginning beginning. I am very noob so your help would be greatly appreciated.

Here's just sample of the codes I am using

Thank you very much!

startTextHandler = async ()=>{
    await this.props.form.validateFields();
    let takerdetail = this.props.form.getFieldsValue();
    let uuid = window.location.pathname.split('/').slice(-1)[0];
    const params = {uuid:this.getUUID()};
    axios.get(`${env.url}/api/v1/test/validate-request`,{params}).then((res) => {
        if(res.data.success && (res.data.request.user === takerdetail.email || res.data.request.test_taker === null)){
        takerdetail.sponsor = res.data.request.sponsor;
        takerdetail.uuid = this.getUUID();
        console.log(takerdetail.uuid);
        this.props.dispatch(QuestionActions.setTakerDetail(takerdetail));
        this.props.history.push(`${this.props.location.pathname}/questions`.replace('//','/'));
        }
        else{
            this.props.form.validateFields((error, values) => {
                if (!error) {
                    this.props.form.setFields({
                        email: {
                            value: values.email,
                            errors: [new Error('Wrong email-id or test link')],
                        }
                    });
                } 
                else {
                  console.log('error', error, values);
                }
              });
        }

    }, (err) => {
        this.props.history.push('/');
    });

};
getUUID(){
    return window.location.pathname.match(/([0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12})/g)[0];
}
    render() {
        const { getFieldDecorator } = this.props.form;

        return (

                                            <div className="subtext">
                                              <Checkbox> I have read and I accept the
                                                  <a target="_blank" href="https://docs.wixstatic.com/ugd/3c785b_bbea80070bda4759bd96f7955b0ef891.pdf"> Terms of Use and Privacy Policy. </a>
                                                I agree that my participation in this personality profiling is voluntary and understand that
                                                my responses will be kept for the intended purposes.</Checkbox>
                                            </div>
                                        )}
                                    </Form.Item>
                                </div>
                                <div className="inputitems terms">

                                    <Form.Item>
                                        {/* <button onClick={this.startTextHandler} className="psButton">START THE TEST</button> */}
                                        <Button  onClick={this.startTextHandler} text={"START THE TEST"}/>
                                    </Form.Item>
                                </div>
                            </Form>
                        </div>
                    </div>
                </div>
            </div>
        )

    }
}
export default  connect()(withRouter(Form.create({ name: 'register' })(TakerDetail)));

Answer 1

As a rule, you should not be disabling the back button in the browser.

That said, you can probably achieve your goal by using the browser state as intended to create a new state when the user inputs data so that it can be popped back into the browser when the user pushes the back button.

https://www.sitepoint.com/javascript-history-pushstate/

There's an explanation of how to manipulate browser history and add states to the history so that the user can back up to (for example) what they had previously entered on your page. (You just have to create the mechanism that allows for that in your code.)

Answer 2

I have been working on this problem from last three days. You cannot disable the browser back Button You will find many methods like erasing the history and so on.