www.2527.com_澳门新葡8455手机版_新京葡娱乐场网址_
做最好的网站

原生js制作轻松的机械键盘,自定义超薄键盘

2019-07-19 09:44 来源:未知

五、简单demo

原生js制作简单的数字键盘,js数字键盘

一、起因

  最近支付的同事说,数字键盘有些问题;在移动设备上有时候比较难出现点(.) 和数字在一起的格局;因此,考虑到这种情况,就建议手写个模拟键盘了。花了一晚上的时间,写了个简单的键盘,基本能用。考虑到有的开发者没有使用juqery,就使用原生的js了。

  Github地址:

二、截图如下

图片 1

三、体验地址(需要点击input才能弹出数字键盘的哦)

URL:

四、代码比较简单,直接贴了

;(function(exports){
  var KeyBoard = function(input, options){
    var body = document.getElementsByTagName('body')[0];
    var DIV_ID = options && options.divId || '__w_l_h_v_c_z_e_r_o_divid';

    if(document.getElementById(DIV_ID)){
      body.removeChild(document.getElementById(DIV_ID));
    }

    this.input = input;
    this.el = document.createElement('div');

    var self = this;
    var zIndex = options && options.zIndex || 1000;
    var width = options && options.width || '100%';
    var height = options && options.height || '193px';
    var fontSize = options && options.fontSize || '15px';
    var backgroundColor = options && options.backgroundColor || '#fff';
    var TABLE_ID = options && options.table_id || 'table_0909099';
    var mobile = typeof orientation !== 'undefined';

    this.el.id = DIV_ID;
    this.el.style.position = 'absolute';
    this.el.style.left = 0;
    this.el.style.right = 0;
    this.el.style.bottom = 0;
    this.el.style.zIndex = zIndex;
    this.el.style.width = width;
    this.el.style.height = height;
    this.el.style.backgroundColor = backgroundColor;

    //样式
    var cssStr = '<style type="text/css">';
    cssStr  = '#'   TABLE_ID   '{text-align:center;width:100%;height:160px;border-top:1px solid #CECDCE;background-color:#FFF;}';
    cssStr  = '#'   TABLE_ID   ' td{width:33%;border:1px solid #ddd;border-right:0;border-top:0;}';
    if(!mobile){
      cssStr  = '#'   TABLE_ID   ' td:hover{background-color:#1FB9FF;color:#FFF;}';
    }
    cssStr  = '</style>';

    //Button
    var btnStr = '<div style="width:60px;height:28px;background-color:#1FB9FF;';
    btnStr  = 'float:right;margin-right:5px;text-align:center;color:#fff;';
    btnStr  = 'line-height:28px;border-radius:3px;margin-bottom:5px;cursor:pointer;">完成</div>';

    //table
    var tableStr = '<table id="'   TABLE_ID   '" border="0" cellspacing="0" cellpadding="0">';
      tableStr  = '<tr><td>1</td><td>2</td><td>3</td></tr>';
      tableStr  = '<tr><td>4</td><td>5</td><td>6</td></tr>';
      tableStr  = '<tr><td>7</td><td>8</td><td>9</td></tr>';
      tableStr  = '<tr><td style="background-color:#D3D9DF;">.</td><td>0</td>';
      tableStr  = '<td style="background-color:#D3D9DF;">删除</td></tr>';
      tableStr  = '</table>';
    this.el.innerHTML = cssStr   btnStr   tableStr;

    function addEvent(e){
      var ev = e || window.event;
      var clickEl = ev.element || ev.target;
      var value = clickEl.textContent || clickEl.innerText;
      if(clickEl.tagName.toLocaleLowerCase() === 'td' && value !== "删除"){
        if(self.input){
          self.input.value  = value;
        }
      }else if(clickEl.tagName.toLocaleLowerCase() === 'div' && value === "完成"){
        body.removeChild(self.el);
      }else if(clickEl.tagName.toLocaleLowerCase() === 'td' && value === "删除"){
        var num = self.input.value;
        if(num){
          var newNum = num.substr(0, num.length - 1);
          self.input.value = newNum;
        }
      }
    }

    if(mobile){
      this.el.ontouchstart = addEvent;
    }else{
      this.el.onclick = addEvent;
    }
    body.appendChild(this.el);
  }

  exports.KeyBoard = KeyBoard;

})(window);

五、简单demo

 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
     <title>模拟数字键盘</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, minimal-ui" />
   </head>
   <body>
     <div>
       <input id="text1" readonly="readonly" type="number" style="height:28px;width:98%;outline:none;border:1px solid #1AB6FF;padding-left:3px;"/>
       <br />
       <br />
       <input id="text2" readonly="readonly" type="number" style="height:28px;width:98%;outline:none;border:1px solid #1AB6FF;padding-left:3px;"/>
     </div>
     <script type="text/javascript" src="keyboard.js"></script>
     <script type="text/javascript">
     (function(){
       var input1 = document.getElementById('text1');
       var input2 = document.getElementById('text2');
       input1.onclick = function(){
         new KeyBoard(input1);
       };
       input2.onclick = function(){
         new KeyBoard(input2);
       };
     })();
     </script>
   </body>
 </html>

以上所述就是本文的全部内容了,希望大家能够喜欢。

一、起因 最近支付的同事说,数字键盘有些问题;在移动设备上有时候比较难出现点(.) 和数字...

实现这个自定义键盘的思路很简单:

;(function(exports){
  var KeyBoard = function(input, options){
    var body = document.getElementsByTagName('body')[0];
    var DIV_ID = options && options.divId || '__w_l_h_v_c_z_e_r_o_divid';

    if(document.getElementById(DIV_ID)){
      body.removeChild(document.getElementById(DIV_ID));
    }

    this.input = input;
    this.el = document.createElement('div');

    var self = this;
    var zIndex = options && options.zIndex || 1000;
    var width = options && options.width || '100%';
    var height = options && options.height || '193px';
    var fontSize = options && options.fontSize || '15px';
    var backgroundColor = options && options.backgroundColor || '#fff';
    var TABLE_ID = options && options.table_id || 'table_0909099';
    var mobile = typeof orientation !== 'undefined';

    this.el.id = DIV_ID;
    this.el.style.position = 'absolute';
    this.el.style.left = 0;
    this.el.style.right = 0;
    this.el.style.bottom = 0;
    this.el.style.zIndex = zIndex;
    this.el.style.width = width;
    this.el.style.height = height;
    this.el.style.backgroundColor = backgroundColor;

    //样式
    var cssStr = '<style type="text/css">';
    cssStr  = '#'   TABLE_ID   '{text-align:center;width:100%;height:160px;border-top:1px solid #CECDCE;background-color:#FFF;}';
    cssStr  = '#'   TABLE_ID   ' td{width:33%;border:1px solid #ddd;border-right:0;border-top:0;}';
    if(!mobile){
      cssStr  = '#'   TABLE_ID   ' td:hover{background-color:#1FB9FF;color:#FFF;}';
    }
    cssStr  = '</style>';

    //Button
    var btnStr = '<div style="width:60px;height:28px;background-color:#1FB9FF;';
    btnStr  = 'float:right;margin-right:5px;text-align:center;color:#fff;';
    btnStr  = 'line-height:28px;border-radius:3px;margin-bottom:5px;cursor:pointer;">完成</div>';

    //table
    var tableStr = '<table id="'   TABLE_ID   '" border="0" cellspacing="0" cellpadding="0">';
      tableStr  = '<tr><td>1</td><td>2</td><td>3</td></tr>';
      tableStr  = '<tr><td>4</td><td>5</td><td>6</td></tr>';
      tableStr  = '<tr><td>7</td><td>8</td><td>9</td></tr>';
      tableStr  = '<tr><td style="background-color:#D3D9DF;">.</td><td>0</td>';
      tableStr  = '<td style="background-color:#D3D9DF;">删除</td></tr>';
      tableStr  = '</table>';
    this.el.innerHTML = cssStr   btnStr   tableStr;

    function addEvent(e){
      var ev = e || window.event;
      var clickEl = ev.element || ev.target;
      var value = clickEl.textContent || clickEl.innerText;
      if(clickEl.tagName.toLocaleLowerCase() === 'td' && value !== "删除"){
        if(self.input){
          self.input.value  = value;
        }
      }else if(clickEl.tagName.toLocaleLowerCase() === 'div' && value === "完成"){
        body.removeChild(self.el);
      }else if(clickEl.tagName.toLocaleLowerCase() === 'td' && value === "删除"){
        var num = self.input.value;
        if(num){
          var newNum = num.substr(0, num.length - 1);
          self.input.value = newNum;
        }
      }
    }

    if(mobile){
      this.el.ontouchstart = addEvent;
    }else{
      this.el.onclick = addEvent;
    }
    body.appendChild(this.el);
  }

  exports.KeyBoard = KeyBoard;

})(window);

3. 与 Edittext 结合使用

二、截图如下

2. 处理各个按键的点击事件

    @Override
    public void onKeyClick(View view, RecyclerView.ViewHolder holder, int position) {
        switch (position) {
            case 9: // 按下小数点
                String num = etInput.getText().toString().trim();
                if (!num.contains(datas.get(position))) {
                    num  = datas.get(position);
                    etInput.setText(num);
                    etInput.setSelection(etInput.getText().length());
                }
                break;
            default: // 按下数字键
                if ("0".equals(etInput.getText().toString().trim())) { // 第一个数字按下0的话,第二个数字只能按小数点
                    break;
                }
                etInput.setText(etInput.getText().toString().trim()   datas.get(position));
                etInput.setSelection(etInput.getText().length());
                break;
        }
    }

    @Override
    public void onDeleteClick(View view, RecyclerView.ViewHolder holder, int position) {
        // 点击删除按钮
        String num = etInput.getText().toString().trim();
        if (num.length() > 0) {
            etInput.setText(num.substring(0, num.length() - 1));
            etInput.setSelection(etInput.getText().length());
        }
    }

逻辑也非常简单,看代码就明白了。最终的效果就是第一张图的样子。

这个键盘很简单,打算之后写一个模仿微信或者支付宝的支付密码输入布局。

->->->点击下载源码<-<-<-

以上所述就是本文的全部内容了,希望大家能够喜欢。

  1. 要写出一个数字键盘的布局;
  2. 与 Edittext 结合使用,对每个按键的点击事件进行处理;
  3. 禁用系统软键盘。

四、代码比较简单,直接贴了

最终效果:

  Github地址:

2. 在代码中实现键盘布局,填充数据、增加点击事件

我们新建类 KeyboardView 继承自 RelativeLayout,关联上面的布局文件,然后做一些初始化操作:对 RecyclerView 填充数据、设置适配器,设置出现和消失的动画效果,写一些会用到的方法等。

public class KeyboardView extends RelativeLayout {

    private RelativeLayout rlBack;
    private RecyclerView recyclerView;
    private List<String> datas;
    private KeyboardAdapter adapter;
    private Animation animationIn;
    private Animation animationOut;


    public KeyboardView(Context context) {
        this(context, null);
    }

    public KeyboardView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public KeyboardView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs, defStyleAttr);
    }

    private void init(Context context, AttributeSet attrs, int defStyleAttr) {
        LayoutInflater.from(context).inflate(R.layout.layout_key_board, this);
        rlBack = findViewById(R.id.rl_back);
        rlBack.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) { // 点击关闭键盘
                dismiss();
            }
        });
        recyclerView = findViewById(R.id.recycler_view);

        initData();
        initView();
        initAnimation();
    }

    // 填充数据
    private void initData() {
        datas = new ArrayList<>();
        for (int i = 0; i < 12; i  ) {
            if (i < 9) {
                datas.add(String.valueOf(i   1));
            } else if (i == 9) {
                datas.add(".");
            } else if (i == 10) {
                datas.add("0");
            } else {
                datas.add("");
            }
        }
    }

    // 设置适配器
    private void initView() {
        recyclerView.setLayoutManager(new GridLayoutManager(getContext(), 3));
        adapter = new KeyboardAdapter(getContext(), datas);
        recyclerView.setAdapter(adapter);
    }

    // 初始化动画效果
    private void initAnimation() {
        animationIn = AnimationUtils.loadAnimation(getContext(), R.anim.keyboard_in);
        animationOut = AnimationUtils.loadAnimation(getContext(), R.anim.keyboard_out);
    }

    // 弹出软键盘
    public void show() {
        startAnimation(animationIn);
        setVisibility(VISIBLE);
    }

    // 关闭软键盘
    public void dismiss() {
        if (isVisible()) {
            startAnimation(animationOut);
            setVisibility(GONE);
        }
    }

    // 判断软键盘的状态
    public boolean isVisible() {
        if (getVisibility() == VISIBLE) {
            return true;
        }
        return false;
    }

    public void setOnKeyBoardClickListener(KeyboardAdapter.OnKeyboardClickListener listener) {
        adapter.setOnKeyboardClickListener(listener);
    }

    public List<String> getDatas() {
        return datas;
    }

    public RelativeLayout getRlBack() {
        return rlBack;
    }
}

Adapter 里面都是很简单的代码,这里就不贴出了,文章末尾我会给出源码下载地址。

到这里为止,自定义数字键盘基本就算写好了,不过最重要的还是要和 Edittext 结合使用。

一、起因

图片 2

URL:

有了思路,实现起来就不难了。

  最近支付的同事说,数字键盘有些问题;在移动设备上有时候比较难出现点(.) 和数字在一起的格局;因此,考虑到这种情况,就建议手写个模拟键盘了。花了一晚上的时间,写了个简单的键盘,基本能用。考虑到有的开发者没有使用juqery,就使用原生的js了。

1. 禁用系统软键盘

if (Build.VERSION.SDK_INT <= 10) {
     etInput.setInputType(InputType.TYPE_NULL);
} else {
     getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);
     try {
         Class<EditText> cls = EditText.class;
         Method setShowSoftInputOnFocus = cls.getMethod("setShowSoftInputOnFocus", boolean.class);
         setShowSoftInputOnFocus.setAccessible(true);
         setShowSoftInputOnFocus.invoke(etInput, false);
     } catch (Exception e) {
         e.printStackTrace();
     }
}

在网上找了一些方法,但是点击 Edittext 的时候系统软键盘依然会弹出。最后找到了这个方法,利用反射强制不弹出软键盘,效果不错。

 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
     <title>模拟数字键盘</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, minimal-ui" />
   </head>
   <body>
     <div>
       <input id="text1" readonly="readonly" type="number" style="height:28px;width:98%;outline:none;border:1px solid #1AB6FF;padding-left:3px;"/>
       <br />
       <br />
       <input id="text2" readonly="readonly" type="number" style="height:28px;width:98%;outline:none;border:1px solid #1AB6FF;padding-left:3px;"/>
     </div>
     <script type="text/javascript" src="keyboard.js"></script>
     <script type="text/javascript">
     (function(){
       var input1 = document.getElementById('text1');
       var input2 = document.getElementById('text2');
       input1.onclick = function(){
         new KeyBoard(input1);
       };
       input2.onclick = function(){
         new KeyBoard(input2);
       };
     })();
     </script>
   </body>
 </html>

1. 实现键盘的 xml 布局

网格样式的布局用 GridView 或者 RecyclerView 都可以实现,其实用 GridView 更方便一些,不过我为了多熟悉 RecyclerView 的用法,这里选择用了 RecyclerView。

图片 3

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:orientation="vertical">

    <View
        android:layout_width="match_parent"
        android:layout_height="2px"
        android:background="@color/btn_gray"/>

    <RelativeLayout
        android:id="@ id/rl_back"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/iv_back_bg"
        android:padding="10dp">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:src="@mipmap/keyboard_back"/>
    </RelativeLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="@color/btn_gray"/>

    <android.support.v7.widget.RecyclerView
        android:id="@ id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/keyboard_bg"
        android:overScrollMode="never"></android.support.v7.widget.RecyclerView>

</LinearLayout>

RecyclerView 用来实现键盘布局,上面的 RelativeLayout 则是为了实现收起键盘的点击事件。

三、体验地址(需要点击input才能弹出数字键盘的哦)

您可能感兴趣的文章:

  • JavaScript实现的可变动态数字键盘控件方式实例代码

图片 4

TAG标签:
版权声明:本文由澳门新葡8455手机版发布于Web前端,转载请注明出处:原生js制作轻松的机械键盘,自定义超薄键盘