文本框设置readonly 之后 光标不显示

Question

如图 做一个移动端的数字输数器 目前界面跟功能完成一大部分了 但是遇到问题了
文字显示的区域 有左移右移 用光标可以跟明显的看到 但是 有光标就会自动调用手机键盘
用户体验很不好 如果文字显示的区域 设置readonly 光标就不会显示
求问
1、有什么办法 用js 屏蔽手机键盘么 (最上面的文本框需要获取光标 一获取光标键盘自动调出)
2、给文本框设置readonly 可以显示光标么 （测试证明 可以获取光标的位置但是光标不显示）

Answer 1

已经解决了 在文本框上面加了一层span 模拟了一个光标

Answer 2

使用onkeydown事件阻止键盘弹出

<input type="text" readonly  onkeydown="return false;" />

Answer 3

span 模拟了一个光标，这部分代码能贴出来么