1. 程式人生 > >選擇輸入控制元件,既可以輸入又可以選擇的控制元件

選擇輸入控制元件,既可以輸入又可以選擇的控制元件

即拿即用,複製貼上,直接使用。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            .div-wrap{
                position: relative;
                margin-bottom: 20px;
            }
            .select-wrap{
                overflow: hidden;
                margin-left: 100px;
                width: 18px;
            }
            .select{
                margin-left: -100px;
                border: 1px solid #ccc;
                border-radius: 5px;
                width: 118px !important;
                height: 32px !important;
            }
            .input{
                position: absolute;
                top: 1px;
                left: 1px;
                border: none;
                border-top-left-radius: 5px;
                border-bottom-left-radius: 5px;
                padding: 0 5px;
                width: 90px;
                height: 30px;
                color: #212121;
                text-align: center;
                font-size: 16px;
            }
        </style>
    </head>
    <body>
        <div class='div-wrap'>
            <span class='select-wrap'>
                <select class='select' onchange='this.parentNode.nextSibling.value=this.value'>
                    <option>111</option>
                    <option>222</option>
                    <option>333</option>
                </select>
            </span>
            <input class='input' value='111'>
        </div>
    </body>
</html>

相關推薦

選擇輸入控制元件可以輸入可以選擇控制元件

即拿即用,複製貼上,直接使用。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Do

Appium 輸入 & 符號實際輸入&-

http android ram rep object urn return esp margin 2018-10-11 12:27:12:178 - [debug] [MJSONWP] Calling AppiumDriver.setValue() with args

duilib中將xml封裝為控制元件簡單示例(簡單自定義控制元件封裝幾個基本控制元件合為1個自定義控制元件)

使用duilib的時候,難免會有這樣的需求: 某一塊Container(Layout)以及裡面的佈局需要重複用,不想每次都複製貼上這麼多,要不然xml太大了; 通過繼承來自定義一個控制元件,比如CButtonUIEx之類的,想讓他像button一樣在xml中被識別; xml裡面的東西

input type="number" 禁止輸入字母E只能輸入數字和小數點

$('input[type=number]').keypress(function(e) {   if (!String.fromCharCode(e.keyCode).match(/[0-9\.]/)) {     return false;   } }); fromCharCode()是St

Vue+Element UI 向Table組建中的每一行新增一個switch元件實現每一行單獨控制

  最近在做公司的裝置管理系統,許可權管理中有一個需求需要展示如下: 每一行表格中的switch單獨控制一行; 實現效果的程式碼如下: <el-table :data="userRights" stripe border align="center" sty

Android仿百度高德地圖位置交換控制元件水平or垂直交換控制元件位置

  開始看到這個需求,準備使用檢視動畫 TranslateAnimation 來實現。但是把因為檢視動畫只是移動了檢視,控制元件的位置沒有改變,導致只能執行一次交換的動作,不能交換回來。逐放棄改用屬性動畫來實現。直接交換兩個控制元件的位置,交換後在將原來控制元件的值賦予交換後

網頁輸入localhost:8080顯示輸入密碼或者失敗。

這個問題一般是tomcat配置出了問題或者端口占用。 具體配置參考別的作者文章嘻嘻嘻。大概就是把系統環境變數填入,然後在tomcat\bin中雙擊startup.bat。有一篇文章是把shutdown.bat和startup.bat搭配服用2333。注意先不要關閉tomca

java入門練習題(三):讀入一組整數(不超過20個)當用戶輸入0時表示輸入結束;然後程式將從這組整數中把第二大的整數找出來並把它打印出來。

 程式意義:讀入一組整數(不超過20個),當用戶輸入0時,表示輸入結束;然後程式將從這組整數中,把第二大的整數找出來,並把它打印出來。  說明:(1)0表示輸入結束,它本身並不計入這組整數中。            (2)在這組整數中,既有整數又有負數;          

vectorstring標準輸入輸出流檔案輸入輸出流01(C++)

按要求編寫程式。 a) 定義一個結構體型別 Student,如下所示: struct Student { int ID; //學號 string name; //姓名 float score[3]; //三門課程成績 }; b) 編寫一個函式,按照上述結構體定義,依次從鍵盤輸

EditText設定輸入的型別只能輸入純數字只能輸入手機號碼只能輸入郵箱等等。

作者:程式設計師小冰,CSDN部落格:http://blog.csdn.net/qq_21376985轉載請說明出處。 下面以數字、電話為例講述EditText怎麼設定輸入型別,其他型別可以參考InputType類。 1) 只能輸入數字 EditText

java——從鍵盤上輸入一個年份輸入一個月份(數字)輸出該月份有多少天

/* (程式頭部註釋開始) </p><p>* 程式的版權和版本宣告部分 * Copyright (c) 2011, 煙臺大學計算機學院學生 * 作 者: 李兆慶

asp.net(c#)web伺服器控制元件多選框checkboxlist控制元件

<%@ Page Language="c#" %> <script runat="server"> void Page_Load() { string msg = "You have selected the following items:<b

花了三年時間開發的四軸運動控制可以替代mcx314運動控制IC

不能 輸入 內部 pga 位數 數據 光柵 邏輯 兩種 采用pci + FPGA架構,所有的運動控制通過一個FPGA實現,性能達到日本mcx314運動IC的水平,主要性能如下: 主要技術指標跟性能: ● 32位PCI總線,4軸伺服/步進電機控制; ● 40路光耦隔離輸

關於父子元件router-view和自定義元件名。

        做了這麼多路由跳轉了,但是今天下午突發奇想,寫一個父子元件以及自定義元件跳轉的小例子。我理解的,當需要點選按鈕路由跳轉的時候,用router-view,當作為預設子元件,只是顯示的時候用自定義元件名。專案地址:https://github.com/nihaoh

C# 自定義控制元件日期時間選擇輸入外掛

// 為textBox1新增一個日期時間選擇控制元件 DateTimeChoser.AddTo(textBox1); DateTimeChoser.Designer.cs using System; using System.ComponentModel; using

前端輸入密碼顯示**點選某個控制元件顯示數字

首先這個是回答別人問題的答案。但由於第一次貼上的答案是有bug的,所以想進行第二次回覆,結果被禁言了,一臉懵逼,好吧,禁就禁吧,我將答案寫成部落格不會被禁了吧?首先說明一下,這是基於jquery的 最簡單的是現有的可以用一下辦法         顯示密碼         $

js控制input框輸入數字時累計求和

logistic BE chan png 累加 rop for mage 申請 input框輸入數字時,自動開始計算累加<div class="form-group"> <label for="inputPassword3" class="col-sm

js 監測from表單中的input和select時時監測沒有輸入選擇信息報錯不允許提交數據

height ssss txt input OS 表達 tip eight html 1.html 代碼為 在input和select同級元素中添加 .error的標簽,用來存放報錯信息 <form action="" method="post" enctype="

C# | Winform程式設計控制元件之數字輸入控制元件(numericUpDown)

數字輸入框控制元件是用於輸入數字和調節數字的一個控制元件,該控制元件中的數字儲存為decimal型別,但是數字必須是整數而不能是小數。 控制元件在工具箱中的樣式如下: 控制元件拖拽到視窗後的樣式如下: 常用屬性: Value屬性:控制數字輸入框的數字的值(可用控制元件的向上或

vs各類控制元件資料的輸入與輸出

1.思維導圖                         2.DateTimePicker控制元件使用過程中要注意手動進行資料的強制轉換,示例如下: dtp_BirthDat