```js
function editButtonClicked(){
    var txtEle = document.getElementById("txtUsername");
    txtEle.style.disabled = false;
    txtEle.style.cursor = "auto";
    txtEle.style.background="white";
}
```

```css
#txtUsername{
  cursor:not-allowed;
}
```

```html
<form>
  <input type="text" id="txtUsername" value="some text" disabled="disabled">
  <input type="button" id="btnEdit" value="edit" onclick="editButtonClicked()">
</form>
```

[![enter image description here](https://i.stack.imgur.com/qd6vs.png)](https://i.stack.imgur.com/qd6vs.png)

I have a `form` which contain some input text field and edit buttons corresponds to each textfield.
Initially the `textfield` was disable and the cursor property was `not-allowed`. After clicking the `Edit` button i want to enable the `textfield` and set the cursor property to browser default. 

```
function btnUEditClick() {
    var txtEle = document.getElementById("txtUsername");
    txtEle.style.disabled = false;
    txtEle.style.cursor = "default";
}

```

But the problem is after setting the cursor property as `default` i cannot edit the `textfield`.

How can i solve this problem?